User Input and Validation Message

Yisrael, does the example contain validation message? I can not find it, there are only red boxes:

It is in that code from the tutorial example
https://www.wix.com/corvid/reference/$w.ValidatableMixin.html#validationMessage

validationMessage

Gets a message indicating why the element is invalid, or an empty string if the message is valid.

Description

Set the value of the validationMessage property using the reject() function of the onCustomValidation() event handler.

In the code sample it is mentioned many times.

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';

You seem to be missing the #validationMessages text box element that is underneath the ‘Confirm Your Email’ and ‘Address’ user inputs and above your save button.

Without it those validation messages won’t have anywhere to appear in your page.

There was screenshot about 6 days ago… This one:

This is validation message shown by onCustomValidation with reject in Wix Form. The only thing I would like to know is how to do the same thing just with InputText and Submit Button. The example above does not show this kind of Validation Message. Am I wrong?

The validation message in the tutorial is all shown in that one text element underneath the user inputs and above the save button.

Obviously you can move that text box to where ever you want it to be on the page, so in theory you could have it across the top of the form where users are more likely to see it more easily if there is an issue with any user input on the form.

Or you can see if you can set up multiple validation message text boxes and have them setup in your code as something like this below:

let validationMessage = '';
let validationMessage1 = '';
let validationMessage2 = '';
let validationMessage3 = '';
let validationMessage4 = '';

if (!$w('#firstName').valid || !$w('#lastName').valid)
validationMessage += 'Please enter your name\n';

if (!$w('#emailInput').valid) {
if (!$w('#emailInput').value)
validationMessage1 += 'Please enter an email address\n';
else if ($w('#emailInput').value !== $w("#emailConfirmInput").value) {
validationMessage2 += 'Email and Confirm Email fields do not match\n';
} 
}

if (!$w('#phone').valid)
validationMessage3 += 'Please enter a valid phone number\n';

if (!$w('#address').valid)
validationMessage4 += 'Please enter an address\n';


//Plus you would need to add on the extra vaidationMessages down here too for each one, so that they are all set to be collapsed or expanded when they are needing to be.//

$w('#validationMessages').text = validationMessage;
$w('#validationMessages').expand();
}
else
$w('#validationMessages').collapse();

However, as you are set in stone that you want to use Wix Forms, then remember with Wix Forms you are using the inbuilt Wix validation option which will add the red frame to whichever user element is wrong, hence why you get the Error option in any user input element design settings.

If you are wanting to do something like this without using Wix Forms and through your own custom user input form, then you can use the Wix TextInput API and the valid function of it.

You can find a good reply from Yisrael about it in a previous forum post here.
https://www.wix.com/corvid/forum/community-discussion/text-field-validation

Plus, you can even go one step further and add a regex to the pattern validation if you wanted, which is also in that previous forum post too…

Is there any person from Wix who can answer without all these links?
Just direct answer not links…

Sometimes it isn’t always good to just give out a direct answer or you are just doing the job of the Wix User for them and they won’t learn anything from it.

Sometimes it is best to give the Wix User the examples and answers that they need contained in examples or previous forum posts etc, so that they can go away and read and study those bites of info and they can learn from them too, so that they will then learn how to do it all themselves and not have to come back to the forum again if it is wrong etc.

Plus, it makes them realise that they can do it themselves and they then have more confidence in themselves and go and do other coded parts on their own websites, instead of feeling like they need to come back to this forum everytime they want to write a new piece of code for their website.

Yes the forum is a great place to come to get much needed help and guidance, however please remember that it isn’t always the Wix Admin / Mods jobs to write all your code and set up your website pages for you.

However, we don’t want to make the Wix Admin / Mods jobs too easy that they have time to have a longer ‘working’ lunch break down the local pub :wink::joy:

1 Like

No problem. The requisite development tools are near at hand - a refrigerator with beer is a few steps away, and I’ve got a bottle of Edradour 10 on my desk.

where do you find that I need to use Wix Forms? How regex will bring all this to Validation Message from screenshot? Are you answering your own questions?

oh mine… sometimes try not to spend so much time writing all this and just answer: this kind of validation message is not implemented in default Input Text, it is custom implementation. Sometimes better read question and not copy/paste all these texts in each thread. Take it easy and take a break with validation message!

@yisrael-wix you need to stop making me so jealous of your working area, plus how do we know that the bottle of whisky is not just an empty bottle that you are wishing was full again :joy:

Also, if you have managed to get yourself a bottle of Edradour 10 Year Old Single Malt, then see if you can get the tin of Malt Whisky Fudge that Edradour do too, excellent sweets to have to eat throughout the day, however not the sort of fudge that you want to really share!

Well I say by Edradour but it is really by another company that makes a lot of different ranges, although not sure that they would ship to yourselves. https://www.gardiners-scotland.co.uk/

i agree, will wix admin please answer this question? i have the exact same objects, same code in 2 different wix accounts, one is test, one is live site, the validation messages appear on the test site and on the live site, its just the “error state” of the input fields, where, i set the “Error” state to show borders in RED.

SITE1SITE2