React Validator - CustomRule

A validation rule with custom validation logic.

Type:

Object

The validation logic should be implemented within the validationCallback function. See this topic for details on using the custom rule for the server-side validation.

message

Specifies the message that is shown for end-users if the current rule is broken.

Type:

String

Default Value: 'Value is invalid'

You do not have to specify this field. In this instance, a default message will be shown. To include the name of the validated editor into the default validation message as a subject, set the name field of the dxValidator object.

If you assign an empty string to the message field, the message will not be shown.

reevaluate

Indicates whether the rule should be always checked for the target value or only when the target value changes.

Type:

Boolean

Default Value: false

type

Specifies the type of the current rule.

Type:

String

Accepted Values: 'required' | 'numeric' | 'range' | 'stringLength' | 'custom' | 'compare' | 'pattern' | 'email'

Set this field to "custom" to define a rule that will be broken as a result of custom validation performed by the validationCallback function.

validationCallback

A function that validates the target value.

Type:

Function

Function parameters:
options:

Object

An object defining validation parameters.

Object structure:
Name Type Description
value

String

|

Number

The validated value.
rule

Object

The current rule object that exposes user-defined options, the isValid and message fields, and the rule type-specific fields.
validator

Object

The Validator object that initiated the validation.
data

Object

The current row data. Exists only when you validate a DataGrid or TreeList cell's value.
Return Value:

Boolean

A Boolean value that indicates whether the validated value is valid against the checked rule.

In the following code, only odd numbers are considered valid:

jQuery
JavaScript
$(function () {
    $("#numberBoxContainer").dxNumberBox({
        value: 3
    }).dxValidator({
        validationRules: [{
            type: "custom",
            validationCallback: validationCallback,
            message: "This is an even number. Enter an odd one."
        }]
    });
});
function validationCallback (e) {
    return e.value % 2 == 0;
}
Angular
HTML
TypeScript
<dx-number-box [value]="3">
    <dx-validator>
        <dxi-validation-rule type="custom" 
            [validationCallback]="validationCallback" 
            message="This is an even number. Enter an odd one.">
        </dxi-validation-rule>
    </dx-validator>
</dx-number-box>
import { DxNumberBoxModule, DxValidatorModule } from "devextreme-angular";
// ...
export class AppComponent {
    validationCallback (e) {
        return e.value % 2 == 0;
    }
}
@NgModule({
    imports: [
        DxNumberBoxModule,
        DxValidatorModule,
        // ...
    ],
    // ...
})

See this topic for a server-side validation example.