React Validator - CustomRule

A validation rule with custom validation logic.

Type:

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.

ignoreEmptyValue

Specifies whether the validationCallback should be called for null and undefined values.

Type:

Boolean

Default Value: false

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

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
data	Object	The current row data. Exists only when you validate a DataGrid or TreeList cell's 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.
value	String \| Number	The validated 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: validateNumber,
            message: "An odd number is expected"
        }]
    });
});
function validateNumber (e) {
    return e.value % 2 == 0;
}

Angular

HTML

TypeScript

<dx-number-box [value]="3">
    <dx-validator>
        <dxi-validation-rule type="custom" 
            [validationCallback]="validateNumber" 
            message="An odd number is expected">
        </dxi-validation-rule>
    </dx-validator>
</dx-number-box>

import { DxNumberBoxModule, DxValidatorModule } from "devextreme-angular";
// ...
export class AppComponent {
    validateNumber(e) {
        return e.value % 2 == 0;
    }
}
@NgModule({
    imports: [
        DxNumberBoxModule,
        DxValidatorModule,
        // ...
    ],
    // ...
})

Vue

App.vue

<template>
    <DxNumberBox :value="3">
        <DxValidator>
            <DxCustomRule
                :validation-callback="validateNumber"
                message="An odd number is expected"
            />
        </DxValidator>
    </DxNumberBox>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxNumberBox from 'devextreme-vue/number-box';
import DxValidator, {
    DxCustomRule
} from 'devextreme-vue/validator';

export default {
    components: {
        DxNumberBox,
        DxValidator,
        DxCustomRule
    },
    methods: {
        validateNumber(e) {
            return e.value % 2 == 0;
        }
    }
}
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import NumberBox from 'devextreme-react/number-box';
import Validator, {
    CustomRule
} from 'devextreme-react/validator';

class App extends React.Component {
    validateNumber(e) {
        return e.value % 2 == 0;
    }

    render() {
        return (
            <NumberBox defaultValue={3}>
                <Validator>
                    <CustomRule
                        validationCallback={this.validateNumber}
                        message="An odd number is expected"
                    />
                </Validator>
            </NumberBox>
        );
    }
}
export default App;

See this topic for a server-side validation example.