I am following up your example on Custom Validation. Can you explain to me what the characters ! and || on the code on
$w(‘#dataset1’).onBeforeSave(().
You can also refer me further readings on those characters. Thanks
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators :
! is a logical NOT
|| is a logical OR
They are operators. For instance you might only want to execute code if:
-
a particular condition is met
-
if two or more conditions are met
-
if a particular condition is not met
Code something like this…
$w.onReady( function () {
let answer = 10
//first example
if (answer === 5+5) {
console.log("first example met")
} **else** {
console.log("first example not met")
}
//second example
if (answer !== 5+5) {
console.log("second example met")
} **else** {
console.log("second example not met")
}
//third example
if ((answer === 2+2) ||
(answer === 5+5))
{
console.log("third example met")
} **else** {
console.log("third example not met")
}
//fourth example
if ((answer === 2+2) &&
(answer === 5+5))
{
console.log("fourth example met")
} **else** {
console.log("fourth example not met")
}
})
Thanks, Mike Moynihan .
That should be helpful to evirina a.
Thanks!
Hello @mikemoynihan99 …
I know this is a pretty old post - but it would be very helpful if you could guide me with the following…
[I am a total novice at coding - sp. JavaScript!]
I have been trying to use the same code as the one @evirina refers to above - with certain modifications to suite my specific need…
The primary difference in my version of the code (what I need) is in the event at which the ‘code runs’ (I may not be using the right terminology here?!).
i.e. ~ In this bit of the code -
$w(' [#dataset1](https://www.wix.com/velo/forum/search/~num~dataset1) '). onBeforeSave (() => {
if (...){
}...
});
Instead of running the code as a function of a dataset - what I want to do is something like this…
[I know the following code fragment will be *invalid* - just trying to let you know what I sort of *want* to do]
$w(‘#State2’) . children . forEach . onChange (( event ) => {
if (…){
}…
});
So, basically I want the code to run every time a user CHANGES a field (element) - ANY ELEMENT - on the form.
I have tried a few ‘experiments’ - one of them was ’ almost’ successful… But haven’t been able to find a solution yet.
Any help will be much appreciated!
@bablifarm could you tell me what element do you want to track the changes that need instant validation?
I would advise on creating a function to make the code more readable and organized. And also so you can repurpose the same function all over your project.
@bwprado , thanks for responding.
There are various types of elements - text/ email/ phone/ address/ country/ Boolean fields etc.
These are all nested within a State (#State2) on a multi-state box. I am trying to code the ‘Next’ button to be activated only when all these fields are validated.
In fact, your suggestion [ “creating a function” ] is exactly how I tried dealing with my problem.
And, as I mentioned above, it is ’ almost’ working!
[ “I have tried a few ‘experiments’ - one of them was ’ almost’ successful” ] …
Here’s the PAGE I am talking about - the code in question comes into play on the second State (after you click the " Proceed to Reservation Form " button.
And here is the code I have at present:-
function validateState2() {
const validateMobile = (otherMobileElementId) => (value, reject) => {
let otherMobileElement = $w(otherMobileElementId);
if (value === otherMobileElement.value) {
otherMobileElement.validity.valid = true;
otherMobileElement.resetValidityIndication();
return;
} else {
console.log("Mobile and Conf Mobile fields do not match");
otherMobileElement.validity.valid = false;
otherMobileElement.updateValidityIndication();
reject(validateState2 + otherMobileElementId);
}
};
const validateEmail = (otherEmailElementId) => (value, reject) => {
let otherEmailElement = $w(otherEmailElementId);
if (value === otherEmailElement.value) {
otherEmailElement.validity.valid = true;
otherEmailElement.resetValidityIndication();
return;
} else {
console.log("Email and Conf Email fields do not match");
otherEmailElement.validity.valid = false;
otherEmailElement.updateValidityIndication();
reject(validateState2 + otherEmailElementId);
}
};
$w("#inputMobileConfirm").onCustomValidation(validateMobile("#inputMobile"));
$w("#inputConfEmail").onCustomValidation(validateEmail("#inputEmail"));
if (!($w('#radioGroup1').valid && $w('#radioGroup2').valid && $w('#radioGroup3').valid &&
$w('#dropdownPrefix').valid && $w('#inputName').valid && $w('#inputSurname').valid &&
$w('#inputAddressMain').valid && $w('#inputState').valid && $w('#inputPin').valid &&
$w('#dropdownCountry').valid && $w('#inputMobile').valid && $w('#inputMobileConfirm').valid &&
$w('#inputEmail').valid && $w('#inputConfEmail').valid &&
$w('#datePicker1').valid && $w('#datePicker2').valid)) {
let validationMessage = '';
if (!$w('#radioGroup1').valid || !$w('#radioGroup2').valid || !$w('#radioGroup3').valid) {
validationMessage += '\u2022\ Please make at lease ONE selection, in EACH of the first three MANDATORY FIELDS above\n\n';
}
if (!$w('#dropdownPrefix').valid) {
validationMessage += '\u2022\ Please choose a Prefix (Salutation) from the drop-down list\n\n';
}
if (!$w('#inputName').valid || !$w('#inputSurname').valid) {
validationMessage += '\u2022\ Please enter your full name\n\n';
}
if (!$w('#inputAddressMain').valid) {
validationMessage += '\u2022\ Please enter your full address\n\n';
}
if (!$w('#inputState').valid) {
validationMessage += '\u2022\ Please enter your State (Region)\n\n';
}
if (!$w('#inputPin').valid) {
validationMessage += '\u2022\ Please enter your PIN/ ZIP (Postal Code)\n\n';
}
if (!$w('#dropdownCountry').valid) {
validationMessage += '\u2022\ Please choose your Country from the drop-down list\n\n';
}
if (!$w('#inputMobile').valid) {
if (!$w('#inputMobile').value) {
validationMessage += '\u2022\ Please enter a "Mobile" number\n\n';
} else {
validationMessage += '\u2022\ Please enter Mobile number in the proper format (eg.12345 12345)\n\n';
}
}
if (!$w('#inputMobileConfirm').valid) {
if (!$w('#inputMobile').value) {
validationMessage += '\u2022\ Please enter Mobile confirmation\n\n';
console.log("enter mobile confirmation");
} else if ($w('#inputMobile').value !== $w("#inputMobileConfirm").value) {
validationMessage += '\u2022\ "Mobile" and "Confirm Mobile" fields do not match\n\n';
console.log("mobile fields do not match");
} else {
validationMessage += '\u2022\ Please enter Mobile confirmation in the proper format (eg.98321 XXXXX)\n\n';
}
}
if (!$w('#inputEmail').valid) {
if (!$w('#inputEmail').value) {
validationMessage += '\u2022\ Please enter an "Email" address\n\n';
} else {
validationMessage += '\u2022\ Please enter your "Email" in a valid format\n\n';
}
}
if (!$w('#inputConfEmail').valid) {
if (!$w('#inputConfEmail').value) {
validationMessage += '\u2022\ Please enter email confirmation\n\n';
console.log("enter email confirmation");
} else if ($w('#inputEmail').value !== $w("#inputConfEmail").value) {
validationMessage += '\u2022\ Email and Confirm email fields do not match\n\n';
console.log("email fields do not match");
} else {
validationMessage += '\u2022\ Please enter your email confirmation in a valid format\n\n';
console.log("email confirmation format X");
}
}
if (!$w('#datePicker1').valid && !$w('#datePicker2').valid) {
validationMessage += '\u2022\ Please check your dates for Check-In & Check-Out (At least ONE NIGHT required)\n\n';
}
console.log('CHECK VALIDITY');
$w('#text231').text = validationMessage;
$w('#box48').expand();
$w('#buttonSeason').disable();
$w('#buttonOffSeason').disable();
} else {
console.log("ALL VALID");
$w('#box48').collapse();
$w('#buttonSeason').enable();
$w('#buttonOffSeason').enable();
}
}
The above code is working up to the point where the following code should come into play… But at that point, it seems to be failing ~
$w(“#inputMobileConfirm”).onCustomValidation(validateMobile(“#inputMobile”));
$w(“#inputConfEmail”).onCustomValidation(validateEmail(“#inputEmail”));
So, the part where the if-statement of the constant declaration
SHOULD come into play… here everything seems to be going for a toss!
~ if (value === otherMobileElement.value) {…}
Apparently, ONLY the 1st onCustomValidation code is running - and the fields are being matched - against each other…
So, at the moment ~
$w(“#inputMobileConfirm”).onCustomValidation(validateMobile(“#inputMobile”));
is working…
And if I change it to ~
$w(“#inputConfEmail”).onCustomValidation(validateEmail(“#inputEmail”));
$w(“#inputMobileConfirm”).onCustomValidation(validateMobile(“#inputMobile”));
then ~
$w(“#inputConfEmail”).onCustomValidation(validateEmail(“#inputEmail”));
will work!
I have been trying out various things - like placing each bits of the code in different positions of the whole code - and others… Nothing has worked so far! 
PS:-
@bwprado …
I forgot to mention ~
I am ‘calling’ (?) the above function with other code - for each of these elements.
Example ~
$w . onReady (() => {
//…
$w ( ‘#inputMobile’ ). onChange (( event )=>{
validateState2 ();
});
$w ( ‘#inputMobileConfirm’ ). onChange (( event )=>{
validateState2 ();
});
$w ( ‘#inputEmail’ ). onChange (( event )=>{
validateState2 ();
});
$w ( ‘#inputConfEmail’ ). onChange (( event )=>{
validateState2 ();
});
});