Text Field Validation

Ask the community
,
1

I am using the “built in” regex validation in the Wix Editor.

If I want to trigger a message on an error from this, how do I do that in Wixcode?

Or do I have to write my own validation using onCustomValidation() to display a message on validation failure?

I do not see a way to trigger a message if a field fails the built in validation (for a phone number, email, etc.). Thanks!

2

Hey dmz,

How are you?

The built-in validation uses preset rules which will “mark” the element (usually with a red border) if the value is invalid. You can also check the validity status yourself. Take a look at $w.TextInput.valid as an example. The example code included under this API…

    let isValid = $w("#myElement").valid;

…can be used to check the validity of the element’s value wherever you need. You could check it in the onChange() function of the element, or in the onClicked() routine of a button on the page.

If one of the built-in validations isn’t suitable for your purposes, you can always set a custom validation right from the settings window of the element:

311×527 20.2 KB

You can work out your regex expression on your own, or use any number of regex expressions available via a search on the Internet. Take a look at regex101 for lots of information and tools.

Hopefully that will give you a good jump start. Let me know how it goes.

Have fun,

Yisrael

3

Happy 2018! I hope you have a great year…

What you have sent is perfect. I had the validation bit correct (and also use regex101) but needed to get something a bit more than the “red box outline”.

Your pointers were exactly what I needed - many thanks!!

4

The .valid property does not work properly during a blur event with URL field types

Example:
A form has a field set to type URL.
Setup a blur event for the field with the code:

console.log($w(“#URL”).valid);

Test:

  1. Preview the form and click into the field and type “aaa” (or any other string that doesn’t start with HTTP://)
  2. Click out of the field. The console.log shows “true” indicating that the field validation is good. The field will have a red box around it indicating an error.
  3. Click into the field again. Do not change the bad URL in the field.
  4. Click out of the field. The console.log shows “false” indicating that the field validation has failed. The field will have a red box around it indicating an error. (finally a correct response)
  5. Click into the field. Change to a valid URL.
  6. Click out of the field. The console.log shows “false” indicating that the field validation has failed even though the URL is valid. The field will NOT have a red box around it indicating an error.

Clicking in and out of the field one more time yields a true response to the “valid” method.

Is this a bug or am I missing something?

5

I have experienced this same behaviour on text input fields trying to use the onBlur event - if you click out of the field the first time after changing it from a non-valid to a valid entry, then .valid will be false, however, it you then simply click back into the field, make no changes at all (so it remains a valid value), and then click back out again, then .valid becomes true. This would definitely seem to be a bug.

6

Hi,

In event handlers (such as onKeyPress, OnBlur), introducing a slight delay using setTimeout should solve the problem.

For example:

export function input1_blur(event, $w) {
   setTimeout(() => {
	  console.log("after timeout: " + $w("#input1").value);
   }, 10);
}

I hope this helps,

Yisrael

7

That should be noted in the doc. I’m probably not the only one who lost hours figuring that out!

thx

8

Old thread but i’m hoping someone can help me out. On my text input fields I have no options to add additional validations. I would like to add a regular expression pattern validation but there is no option in settings. The only option i have is Required. I don’t have Limit Length or Read Only either

Am i missing something?

9

You’re right, this is an old thread, and old threads shouldn’t be bumped - you should post your own question.

Also, this is not related to code - which is what this forum is all about.

However, scroll down in the Settings box…

1394×1294 99.7 KB

10

Yeah, that’s exactly what i’m talking about
I know how to scroll down. Here’s what I see however. There is no scroll

11

This does not work for a FormField. It only works for a TextInput element.

If you need further details or clarification regarding the Form App, you should contact Wix Customer Care .

12

Solved:

This is specific to a use case for myself, however I wanted to check an email was entered to save spamming after the captcha was completed. So I had custom validation and Regex in $w(“#emailInput”) element, I needed it to be confirmed as a valid email before subsequently hashing the email and then also creating a reference shortly after the confirmation the email was correct. This is how I achieved it.

export function emailInput_keyPress(event) {
if (event.key === “Enter” ) {
$w( “#emailInput” ).onCustomValidation((valid, reject) => {
setTimeout(() => {
reject = $w( “#emailInput” ).validationMessage;
if (reject.length > 0 ) {
$w( “#emailFailure” ).show();
$w( “#emailSuccess” ).hide();
$w( “#emailFailure” ).text = ( “Email Failure:”+" " +reject);
$w( “#emailInput” ).style.borderColor = “rgb(255,0, 0)” ;
$w( “#submitEmail” ).disable();
} else {
$w( “#emailFailure” ).hide();
$w( “#emailSuccess” ).show();
$w( “#emailInput” ).style.borderColor = “rgb(0,255, 0)” ;
let email = $w( “#emailInput” ).value;
$w( “#hashedEmail” ).value = hash(email);
checkRef();
}
}, 10 );
})
}
}