Vue Validator - 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.
message
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.htmlapp.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.jsimport 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.htmlapp.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.jsimport 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.htmlapp.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.jsimport 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.
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.
validationCallback
Name | Type | Description |
---|---|---|
column |
The column to which the cell being validated belongs. Exists only when you validate a built-in editor in the DataGrid or TreeList. |
|
data |
The current row's data. Exists only when you validate a DataGrid or TreeList cell's value. |
|
formItem |
The form item being validated. Exists only when you validate a built-in editor in the Form UI component. |
|
rule |
The rule being checked. |
|
validator |
The Validator object that initiated the validation. |
|
value | | |
The validated value. |
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
$(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
<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
<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
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;
If you have technical questions, please create a support ticket in the DevExpress Support Center.