Vue 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.

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

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
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.