onCustomValidation( )

Adds an event handler that runs when the element's validation is checked.

Description

The onCustomValidation() function allows you perform custom validation in addition to any basic validation that was defined in the Editor.

To invalidate the element, call the reject() function that is passed into the validator callback function and pass it a validation message.

The element's validity is checked when the value of the element changes either by user interaction or programmatically.

Note that validations other than required, including custom validations, are not run on input elements when they don't have a value.

You can use the override parameter to override previously applied custom validations.

Syntax

function onCustomValidation(validator: CheckboxGroupValidator, [override: boolean]): void
validator: function CheckboxGroupValidator(value: Array<string>, reject: Function): void

onCustomValidation Parameters

NAME

TYPE

DESCRIPTION

validator

CheckboxGroupValidator

The name of the function or the function expression to run when the element's custom validation is checked.

override

Optional

boolean

When true, overrides any existing custom validations set for the element so that only the current custom validation applies.

When false, the current custom validation is added to the previously applied validations and all of them run. The order of execution follows the order the validations were set. If one of the validations rejects, the rest of the validations won't run.

Defaults to true, so that omitting the override property causes the current custom validation to override any other validations. If multiple validations are set to override explicitly or by default, only the last applied validation will run.

For example, if you add 4 custom validations to an element and set the override parameter to false, true, false, false respectively, the first validation won't run and the remaining validations will run. This is because the second validation overrides the first.

Returns

This function does not return anything.

Return Type:

void

CheckboxGroupValidator Parameters

NAME

TYPE

DESCRIPTION

value

Array<string>

The value of the element being validated.

reject

Function

A function that invalidates the element with the specified message.

Returns

This function does not return anything.

Return Type:

void

Was this helpful?

Set an element to invalid if its value is "evil"

Copy Code

1$w("#myElement").onCustomValidation( (value, reject) => {
2  if(value === "evil") {
3    reject("Evil is invalid");
4  }
5} );

Set a new custom validation that overrides a previous validation

Copy Code

1// This validation won't run
2$w("#myElement").onCustomValidation( (value, reject) => {
3  if(value === "evil") {
4    reject("Evil is invalid");
5  }
6}, false);
7
8// This validation will run
9$w("#myElement").onCustomValidation( (value, reject) => {
10  if(value === "bad") {
11    reject("Bad is invalid");
12  }
13}, true);

Set multiple custom validations

In this example, only the 3rd and 4th custom validations run. This is because the override property for the 3rd validation is set to true by default and overrides the previous 2 validations.

Copy Code

1// This validation won't run
2$w("#myElement").onCustomValidation( (value, reject) => {
3  if(value === "ain't") {
4    reject("Ain't is invalid");
5  }
6}, false);
7
8// This validation won't run
9$w("#myElement").onCustomValidation( (value, reject) => {
10  if(value === "i'd've") {
11    reject("I'd've is invalid");
12  }
13}, true);
14
15// This validation runs first
16$w("#myElement").onCustomValidation( (value, reject) => {
17  if(value === "there're") {
18    reject("There're is invalid");
19  }
20});
21
22// This validation runs second
23$w("#myElement").onCustomValidation( (value, reject) => {
24  if(value === "could've") {
25    reject("Could've is invalid");
26  }
27}, false);