React Validator - CustomRule

A rule with custom validation logic.

Type:

Object

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.

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

    App.js
    • import React from 'react';
    •  
    • import 'devextreme/dist/css/dx.common.css';
    • 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

    App.js
    • import React from 'react';
    •  
    • import 'devextreme/dist/css/dx.common.css';
    • 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

    App.js
    • import React from 'react';
    •  
    • import 'devextreme/dist/css/dx.common.css';
    • 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

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.

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:

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