Vue Validator - CustomRule

A rule with custom validation logic.

import { DxValidationRulesTypes } from "devextreme-vue/validation-rules"
Type: DxValidationRulesTypes.CustomRule

To specify the custom rule, set the type to "custom" and declare the validationCallback function.

You can also set a custom message, specify whether empty values are valid, and whether the rule should be re-evaluated, even if the target value is the same.

See Also

ignoreEmptyValue

If true, the validationCallback is not executed for null, undefined, false, and empty strings.

Selector: ignore-empty-value
Type:

Boolean

Default Value: false

message

Specifies the message that is shown if the rule is broken.

Type:

String

Default Value: 'Value is invalid'

An error message can be specified as follows:

  • Hard-code the message

    jQuery
    index.js
    $(function() {
    $("#textBox").dxTextBox({ ... })
        .dxValidator({
            type: "custom",
            message: "My custom message"
        });
});
    Angular
    app.component.html
    app.module.ts
    <dx-text-box> 
    <dx-validator>
        <dxi-validation-rule 
            type="custom" 
            message="My custom message">
        </dxi-validation-rule>
    </dx-validator>
</dx-text-box>
    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxValidatorModule,
         DxTextBoxModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        DxTextBoxModule,
        BrowserModule,
        DxValidatorModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
    Vue
    App.vue
    <template>
    <DxTextBox>
        <DxValidator>
            <DxCustomRule
                message="My custom message"
            />
        </DxValidator>
    </DxTextBox>
</template>

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

import { DxTextBox } from 'devextreme-vue/text-box';
import {
    DxValidator,
    DxCustomRule
} from 'devextreme-vue/validator';

export default {
    components: {
        DxTextBox,
        DxValidator,
        DxCustomRule
    }
}
</script>
    React
    App.js
    import React from 'react';

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

import { TextBox } from 'devextreme-react/text-box';
import {
    Validator,
    CustomRule
} from 'devextreme-react/validator';

class App extends React.Component {
    render() {
        return (
            <TextBox>
                <Validator>
                    <CustomRule
                        message="My custom message" />
                </Validator>
            </TextBox>
        );
    }
}
export default App;

  • Hide the message

    jQuery
    index.js
    $(function() {
    $("#textBox").dxTextBox({ ... })
        .dxValidator({
            type: "custom",
            message: ""
        });
});
    Angular
    app.component.html
    app.module.ts
    <dx-text-box>
    <dx-validator>
        <dxi-validation-rule 
            type="custom" 
            message="">
        </dxi-validation-rule>
    </dx-validator>
</dx-text-box>
    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

 import { DxValidatorModule,
          DxTextBoxModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxValidatorModule,
        DxTextBoxModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
    Vue
    App.vue
    <template>
    <DxTextBox>
        <DxValidator>
            <DxCustomRule
                message=""
            />
        </DxValidator>
    </DxTextBox>
</template>

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

import { DxTextBox } from 'devextreme-vue/text-box';
import {
    DxValidator,
    DxCustomRule
} from 'devextreme-vue/validator';

export default {
    components: {
        DxTextBox,
        DxValidator,
        DxCustomRule
    }
}
</script>
    React
    App.js
    import React from 'react';

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

import { TextBox } from 'devextreme-react/text-box';
import {
    Validator,
    CustomRule
} from 'devextreme-react/validator';

class App extends React.Component {
    render() {
        return (
            <TextBox>
                <Validator>
                    <CustomRule
                        message="" />
                </Validator>
            </TextBox>
        );
    }
}
export default App;

  • Display the editor's name in the message

    jQuery
    index.js
    $(function() {
    $("#textBox").dxTextBox({ ... })
        .dxValidator({
            name: "Password", // The error message will be "Password is invalid"
            validationRules: [{
                type: "custom"
            }]
        });
});
    Angular
    app.component.html
    app.module.ts
    <dx-text-box>
    <!-- The error message will be "Password is invalid" -->
    <dx-validator name="Password">
        <dxi-validation-rule 
            type="custom">
        </dxi-validation-rule>
    </dx-validator>
</dx-text-box>
    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxValidatorModule,
         DxTextBoxModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxValidatorModule,
        DxTextBoxModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
    Vue
    App.vue
    <template>
    <DxTextBox>
        <!-- The error message will be "Password is invalid" -->
        <DxValidator name="Password">
            <DxCustomRule />
        </DxValidator>
    </DxTextBox>
</template>

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

import { DxTextBox } from 'devextreme-vue/text-box';
import {
    DxValidator,
    DxCustomRule
} from 'devextreme-vue/validator';

export default {
    components: {
        DxValidator,
        DxCustomRule
    }
}
</script>
    React
    App.js
    import React from 'react';

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

import { TextBox } from 'devextreme-react/text-box';
import {
    Validator,
    CustomRule
} from 'devextreme-react/validator';

class App extends React.Component {
    render() {
        return (
            <TextBox>
                {/* The error message will be "Password is invalid" */}
                <Validator name="Password">
                    <CustomRule} />
                </Validator>
            </TextBox>
        );
    }
}

export default App;

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

If you set this property to false, the rule is checked only when you change an editor's value. If you enter a value and validate the editor's value twice, the validation callback is executed only once.

If you set this property to true, the rule is checked every time an editor is validated. If you enter a value and validate the editor's value twice, the validation callback is executed twice.

type

Specifies the rule type. Set it to "custom" to use the CustomRule.

Type:

String

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

validationCallback

A function that validates the target value.

Selector: validation-callback
Type:

Function

Function parameters:
options:

Object

An object defining validation parameters.

Object structure:
Name Type Description
column

Object

The column to which the cell being validated belongs. Exists only when you validate a built-in editor in the DataGrid or TreeList.
data

Object

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

Object

The form item being validated. Exists only when you validate a built-in editor in the Form UI component.
rule

Object

The rule being checked.
validator

Object

The Validator object that initiated the validation.
value

String

|

Number

The validated value.
Return Value:

Boolean

true if the value is valid; otherwise, false.

The following code shows a validationCallback example. The function accepts a number and returns true if the number is even and false if it is odd:

jQuery
JavaScript
$(function () {
    $("#numberBoxContainer").dxNumberBox({
        value: 4
    }).dxValidator({
        validationRules: [{
            type: "custom",
            validationCallback: validateNumber,
            message: "An even number is expected"
        }]
    });
});
function validateNumber (e) {
    return e.value % 2 == 0;
}
Angular
HTML
TypeScript
<dx-number-box [value]="4">
    <dx-validator>
        <dxi-validation-rule type="custom" 
            [validationCallback]="validateNumber" 
            message="An even 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="4">
        <DxValidator>
            <DxCustomRule
                :validation-callback="validateNumber"
                message="An even number is expected"
            />
        </DxValidator>
    </DxNumberBox>
</template>

<script>
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.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={4}>
                <Validator>
                    <CustomRule
                        validationCallback={this.validateNumber}
                        message="An even number is expected"
                    />
                </Validator>
            </NumberBox>
        );
    }
}
export default App;