Custom validation is an important aspect of form creation, as it ensures that the data entered by users is in the proper format and meets specific requirements. Velo allows developers to add validation to forms using both the settings of the User Input elements and JavaScript code.
Field-level validation can be set up using the settings of the User Input elements, while additional validation can be added using JavaScript code. Custom validations can include checks that depend on more than one element and are not available through the Input element settings. The Velo API reference provides the functionality for code-based validations.
To add custom validation, developers can add validation logic to an event handler set using the Input element's onCustomValidation() function. Within the handler, developers can 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. As an example, consider a form with an email field and a requirement that users only enter email addresses with a specific domain. The following code can be added to the page's onReady() function to enforce this validation:
$w.onReady(function ()
{ $w("#textInput1").onCustomValidation( (value, reject) => {
if( !value.endsWith("@wix.com") ) {
reject("Email address must be a wix.com address."); }
} );
});
In addition to the basic functionality for custom validations in Velo, the Velo API also provides a set of additional features that can be used to enhance the validation process. These features include the valid property, the validity property, the validationMessage property, the resetValidityIndication() function, and the updateValidityIndication() function.
The valid property is a boolean value that indicates whether an element's value is valid or not. It takes both standard and custom validation into consideration, making it a useful tool for checking the validity of an element.
The validity property returns a ValidityState object that contains detailed information about why an element is invalid. This object can be used to access specific details about the validation process, such as whether a value is missing or whether it does not match the expected format.
The validationMessage property returns a message indicating why an invalid element is invalid. Developers can set a custom message using the reject() function, or the validationMessage may contain a standard validation message such as "value missing" or "type mismatch".
The resetValidityIndication() function is used to clear the visual cue that signifies that an element is invalid. This can be useful in situations where the user has corrected an error and the cue is no longer needed.
The updateValidityIndication() function is a method provided by the Velo API that allows developers to update the visual indication of whether an element's value is valid or invalid. This function is typically used in conjunction with custom validation logic that has been added to a form, and it updates the visual cue on the element based on the element's current validity state.
The visual cue that signifies whether an element is invalid can include things like an error message, a red border, or an icon. The updateValidityIndication() function allows developers to update this visual cue in real-time as the user interacts with the form, which can provide a more seamless user experience by giving immediate feedback on the validity of the data entered into the form.
In other words, this function helps to keep the visual representation of the form in sync with the data validation state of the form, so the user can see whether the data they've entered is valid or not.