Velo: About Validating User Input with Code

When creating a form, you may want to validate user input before it is added to your collection. Validating the data entered in your form ensures that you receive all of the data you expect and that the data is in the proper format.

Whenever possible, your form validation should prevent users from entering invalid values. In cases where you can't prevent the invalid data from being entered, you should check the data before submitting it and notify the user if it's invalid.

Velo allows you to set up some field-level validation using the settings of the User Input elements. Additional validation can be added using JavaScript code.

This article focuses on the the code-based validations. To learn more about field-level validations using the settings of the User Input elements, see Validating User Input with Settings. 

Code-based validations allow you to add validations that are not available through the Input element settings, including validations that depend on more than one element. The functionality for code based validations can be found in the Velo API reference.

Note that custom validationsare not run on Input elements when they don't have a value.

Typical Validation Scenario

Typically, to add custom validation you add custom validation logic in an event handler that you set using the Input element's onCustomValidation() function. Within that handler, you call the reject() function to indicate that the element is invalid. The element's validity is checked when the value of the element changes either by user interaction or programmatically.

Example

Let's take a look at a simple example. Suppose we have a form that has an email field and we want to limit users to entering email addresses with a certain domain.

To do so we add the following code in the page's onReady() function:

1
$w.onReady(function () {
2
  $w("#textInput1").onCustomValidation( (value, reject) => {
3
    if( !value.endsWith("@wix.com") ) {
4
      reject("Email address must be a wix.com address.");
5
    }
6
  });
7
});

On line 2 we call the element's onCustomValidation() function to register the event handler that is called when the element is being validated. That function receives two parameters, value and reject. The value parameter is the current value of the element that is being validated. The reject parameter is a function that we can call to invalidate the element.

On line 3 we check to see if the value doesn't end with wix.com.

On line 4, which is reached only if the value doesn't end with wix.com, we invalidate the element using the reject() function and pass it a rejection message.

Additional Validation Functionality

The Velo API contains some additional functionality that can be used when performing custom validations. 

valid

The valid property indicates if an element's value is valid. It takes both standard and custom validation into consideration.

validity

The validity property returns a ValidityState object that contains detailed information about why an element is invalid.

validationMessage

The validationMessage property returns a message indicating why an invalid element is invalid. You can set the validationMessage using the reject() function. If you don't set a custom message, the validationMessage may contain a standard validation message, such as "value missing" or "type mismatch".

resetValidityIndication()

The resetValidityIndication() function clears the visual cue that signifies that an element is invalid.

updateValidityIndication()

The updateValidityIndication() function updates the visual cue that signifies whether an element is invalid based on the element's current validity state.