I am trying to add a custom validation for user input for password. the validation compare the user input in the field of password and compare it with conform field and show error messages if the inputs not matched. I followed the example in this link: https://www.wix.com/code/home/example/Custom-Validations
and applied that on the field of password and conform password. the problem is relating to Messages validation, lines 34 to 38, how can I fix it?
Hi,
Did you add the text element ?
Roi
Hi,
yes, you can find it from line 23 to 29
Thanks,
Tahani
hi …
Your JavaScript code does not see validationmessage Notice line 34-35
you can change id element in developer tools
good luck
Hi,
You need to match the id name in the element and in the code.
Roi
Thank you all for the replies . I changed the ID element and got the following error (“text” is undefined)). Any suggestion?
click in submit button and click add failure message and change id to validationmessage
Thank you thabet for your help. now the error is gone and there is no errors shown. however, the second field of conform the password do not work and do not allow to write anything. what is the problem do you think?
this code for confirm email … u need delete line 8 valid = true
i think
Thanks thabet. I delete line 8 and modified the code to validate the password but still do not know where the error. Do you have any example for validate password input?
Hi All,
I wanted to check if onCustomValidation can be used to validate values (numbers).
For example,
$w.onReady(function () {
$w(“#text1”).onCustomValidation( (value, reject) => {
if( value > Number($w(“#text2”).text) ) {
reject(“You have reached the limit!”);
}
});
});
Thank you!
Just figured it out! Please refer to the solution below for those who need reference.
Solution: Setting max value for a user input (in a custom form) on a dynamic page.
$w.onReady(function () {
$w(“#dataset1”).onReady( () => {
$w(“#input1”).max = $w(“#dataset1”).getCurrentItem().field1;
});
});
Cheers!
You are using this Wix Tutorial.
https://www.wix.com/corvid/example/custom-validations
$w.onReady(function () {
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 Your Email fields do not match");
otherEmailElement.validity.valid = false;
otherEmailElement.updateValidityIndication();
reject("Email and Confirm Email fields do not match");
};
$w("#emailConfirmInput").onCustomValidation(validateEmail("#emailInput"));
$w("#emailInput").onCustomValidation(validateEmail("#emailConfirmInput"));
$w('#dataset1').onBeforeSave(() => {
if (!($w('#firstName').valid && $w('#lastName').valid && $w('#emailInput').valid &&
$w('#phone').valid && $w('#address').valid)) {
let validationMessage = '';
if (!$w('#firstName').valid || !$w('#lastName').valid)
validationMessage += 'Please enter your name\n';
if (!$w('#emailInput').valid) {
if (!$w('#emailInput').value)
validationMessage += 'Please enter an email address\n';
else if ($w('#emailInput').value !== $w("#emailConfirmInput").value) {
validationMessage += 'Email and Confirm Email fields do not match\n';
}
}
if (!$w('#phone').valid)
validationMessage += 'Please enter a valid phone number\n';
if (!$w('#address').valid)
validationMessage += 'Please enter an address\n';
$w('#validationMessages').text = validationMessage;
$w('#validationMessages').expand();
}
else
$w('#validationMessages').collapse();
});
});
Check your code as you’re spellings are not matching up with ‘other’
otherPassElement // you have it as othePassElement and not otherPassElement
Plus, as Thabet has stated too, they have used a submit button which is linked to the dataset’s own submit that you can automatically add a pass and failure message with too.
However, you only needed to change the element id name to ‘validationMessages’ and you would not have had to alter any of your code to suit.
Make sure the validation message has collapsed on load turned on in the properties panel, so that it has the blue overlay as shown in pic below.
Can someone help me on my code below ? The code doesn’t work and I didn’t get any validation message when password not match. Even password match, the button doesn’t direct me to the specific page. Please help & thank you in advance!
$w.onReady( function () {
const validatePass = (otherPassElementId) => (value, reject) => {
let otherPassElement = $w(otherPassElementId);
if (value === otherPassElement.value) {
otherPassElement.validity.valid = true ;
otherPassElement.resetValidityIndication();
return ;
}
console.log(‘Email and Confirm Your Email fields do not match’);
otherPassElement.validity.valid = false ;
otherPassElement.updateValidityIndication();
reject(‘Email and Confirm Email fields do not match’);
};
$w(‘#password2’).onCustomValidation(validatePass(‘#password1’));
$w(‘#password1’).onCustomValidation(validatePass(‘#password2’));
$w('#dataset1').onBeforeSave(() => {
if (!($w(‘#firstname’).valid && $w(‘#lastname’).valid && $w(‘#email’).valid &&
$w(‘#companyname’).valid) && $w(‘#password’)) {
let validationMessage = ‘’;
if (!$w(‘#firstname’).valid || !$w(‘#lastname’).valid)
validationMessage += ‘Please enter your name\n’;
if (!$w(‘#email’).valid)
validationMessage += ‘Please enter a valid email\n’;
if (!$w(‘#companyname’).valid)
validationMessage += ‘Please enter your company\n’;
if (!$w(‘#password1’).valid) {
if (!$w(‘#password1’).value)
validationMessage += ‘Please enter a password\n’;
else if ($w(‘#password1’).value !== $w(‘#password2’).value) {
validationMessage += ‘Email and Confirm Email fields do not match\n’;
}
}
$w('#validationmessage').text = validationMessage;
$w('#validationmessage').expand();
} **else**
$w('#validationmessage').collapse();
});
});