Custom Validation On Key Press For TextInput Fields

Hi,
I don’t know if I’m being dumb or if it’s just not a feature (if so, why?), but my onCustomValidation function for my TextInput field isn’t firing on key press.

Am I missing something? If this isn’t implemented then is there a way around it?

I don’t want to make this a HTMLComponent if I don’t have to…

The code I have is as follows:

$w('#username').onCustomValidation((value, reject) => {
  setTimeout(() => {
    let error = $w("#error");
    let errorText = "";

    console.log("RUNNING!");

    if (value.length === 0) {
      errorText = "Username is required.";
      SetError(errorText, error);
      reject(errorText);
      return;
    }

    value = CheckRegex(value);

    if (value.length < MIN_LENGTH) {
      errorText = "Username must contain at least " +
                   MIN_LENGTH + " characters.";
      SetError(errorText, error);
      reject(errorText);
      return;
    }

    SetError("", error);
  }, 10);
});

Where is this code and how did you put it there? Context is everything.

The code is in the page’s $w.onReady function.

@sam-groves When do you want it to run? And, how did you put it there? (i.e. are you using the field’s validation setting?)

@mike70099 It’s meant to run on keypress so I can get a live update on the field’s validity. The pattern matching etc. provided by the settings only seem to fire on focus change. The issue is, that the code based custom validation also seems to only take effect on focus change.

@sam-groves Your code needs to run onKeyPress. See attached image. I have a form which computes a bunch of numbers and I recompute on each key press.

Select your field and then open the properties window. Select onKeyPress and then the “+” icon to add an onKeyPress function to your code. Before you add it, you can change the name of the function. Then, put your code in there.

@mike70099 That worked! Thank you. I was unaware that the onCustomValidation function worked like that. Now I just need to get it to work with the updated value :slight_smile:

@sam-groves Not sure you even need to use onCustomValidation. Its difficult to say without knowing more about what you are doing. But, by capturing the key press in a field, you can use it to run any code you want. Note: I have found this to run REALLY SLOW in preview mode, but runs fine in the live version.

There are many validation pages that you can read if you need them for reference in the future.
https://support.wix.com/en/article/working-with-user-input-validation-in-the-settings-panel
https://www.wix.com/corvid/example/custom-validations
https://support.wix.com/en/article/corvid-about-validating-user-input-with-code

For code reference see here.
https://www.wix.com/corvid/reference/$w.ValidatableMixin.html

You can also do the validation on the text input itself.
https://www.wix.com/corvid/reference/$w.TextInput.html
https://www.wix.com/corvid/reference/$w.TextBox.html

Finally, if you are using onKeyPress, then you should look at giving the text a little bit of a timeout so that the text is fully entered before anything else happens.
https://www.wix.com/corvid/forum/corvid-tips-and-updates/give-the-textinput-onkeypress-function-some-time