[Disclaimer ~ I am a total novice at coding - sp. in JavaScript]
I am trying to customise a Form, using a multi-state box.
The code in question is related to a particular State ( #State2 ) on a multi-state box.
There are various types of elements nested within State 2 of this multi-state box - text/ email/ phone/ address/ country/ Boolean fields etc…
I am trying to code the ‘Next’ button (bottom of the State Box) to be activated only when all these fields are validated.
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:-
[The ‘email & mobile validation’ part of the code I have modified from THIS EXAMPLE - to the best of my understanding]
function validateState2() {
const validateEmail = (otherEmailElementId) => (value, reject) => {
let otherEmailElement = $w(otherEmailElementId);
if (value === otherEmailElement.value) {
otherEmailElement.validity.valid = true;
otherEmailElement.resetValidityIndication();
return;
}
console.log("Email and Confirm Email fields do not match");
otherEmailElement.validity.valid = false;
otherEmailElement.updateValidityIndication();
reject("Email and Confirm Email fields do not match");
};
$w("#inputConfEmail").onCustomValidation(validateEmail("#inputEmail"));
$w("#inputEmail").onCustomValidation(validateEmail("#inputConfEmail"));
const validateMobile = (otherMobileElementId) => (value, reject) => {
let otherMobileElement = $w(otherMobileElementId);
if (value === otherMobileElement.value) {
otherMobileElement.validity.valid = true;
otherMobileElement.resetValidityIndication();
return;
}
console.log("Mobile and Confirm Mobile fields do not match");
otherMobileElement.validity.valid = false;
otherMobileElement.updateValidityIndication();
reject("Mobile and Confirm Mobile fields do not match");
};
$w("#inputMobileConfirm").onCustomValidation(validateMobile("#inputMobile"));
$w("#inputMobile").onCustomValidation(validateMobile("#inputMobileConfirm"));
// The greyed out parts of the following code is working fine
if (!($w('#radioGroup1').valid && $w('#radioGroup2').valid && $w('#radioGroup3').valid &&
$w('#dropdownPrefix').valid && $w('#inputName').valid && $w('#inputSurname').valid &&
$w('#inputAddressMain').valid && $w('#input36').valid && $w('#input37').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('#input36').valid)
validationMessage += '\u2022\ Please enter your State (Region)\n\n';
if (!$w('#input37').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('#inputEmail').valid) {
if (!$w('#inputEmail').valid)
validationMessage += '\u2022\ Please enter your email in a valid format\n\n';
if (!$w('#inputEmail').value)
validationMessage += '\u2022\ Please enter an email address\n\n';
else if ($w('#inputEmail').value !== $w("#inputConfEmail").value) {
validationMessage += '\u2022\ Email and Confirm Email fields do not match\n\n';
}
}
if (!$w('#inputConfEmail').valid) {
if (!$w('#inputConfEmail').valid)
validationMessage += '\u2022\ Please enter your email confirmation in a valid format\n\n';
else
if (!$w('#inputConfEmail').value)
validationMessage += '\u2022\ Please enter email confirmation\n\n';
}
if (!$w('#inputMobile').valid) {
if (!$w('#inputMobile').valid)
validationMessage += '\u2022\ Please enter Mobile number in the proper format (eg.98321 XXXXX)\n\n';
if (!$w('#inputMobile').value)
validationMessage += '\u2022\ Please enter a valid Mobile number\n\n';
else if ($w('#inputMobile').value !== $w("#inputMobileConfirm").value) {
validationMessage += '\u2022\ Mobile and Confirm Mobile fields do not match\n\n';
}
}
if (!$w('#inputMobileConfirm').valid) {
if (!$w('#inputMobileConfirm').valid)
validationMessage += '\u2022\ Please enter Mobile confirmation in the proper format (eg.98321 XXXXX)\n\n';
else
if (!$w('#inputMobileConfirm').value)
validationMessage += '\u2022\ Please enter Mobile confirmation\n\n';
}
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';
$w('#text231').text = validationMessage;
$w('#box48').expand();
$w('#button10').enable();
$w('#button11').enable();
} else {
$w('#box48').collapse();
$w('#button10').disable();
$w('#button11').disable();
}
}
----------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------
$w.onReady(() => {
$w('#radioGroup1').onClick((event) => {
console.log($w('#radioGroup1').valid);
validateState2();
});
$w('#radioGroup2').onChange((event) => {
console.log($w('#radioGroup2').valid);
validateState2();
});
$w('#radioGroup3').onChange((event) => {
validateState2();
});
$w('#dropdownPrefix').onChange((event) => {
validateState2();
});
$w('#inputName').onChange((event) => {
validateState2();
});
$w('#inputSurname').onChange((event) => {
validateState2();
});
$w('#inputAddressMain').onChange((event) => {
validateState2();
});
$w('#input36').onChange((event) => {
validateState2();
});
$w('#input37').onChange((event) => {
validateState2();
});
$w('#dropdownCountry').onChange((event) => {
validateState2();
});
$w('#inputMobile').onChange((event) => {
validateState2();
});
$w('#inputMobileConfirm').onChange((event) => {
validateState2();
});
$w('#inputEmail').onChange((event) => {
validateState2();
});
$w('#inputConfEmail').onChange((event) => {
validateState2();
});
$w('#datePicker1').onChange((event) => {
validateState2();
});
$w('#datePicker2').onChange((event) => {
validateState2();
$w('#box48').show();
});
});
As long as the email and mobile fields are all correctly entered, the rest of the code works fine - but as soon as there is an error in either of those two fields, the ‘Validation Message’ goes for a complete toss - it displays ALL the ‘error messages’ - even if there aren’t any errors in them!
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! 
Any guidance would be much appreciated…
Thanks in advance!