React Validator - CompareRule
A validation rule that demands that a validated editor has a value that is equal to a specified expression.
To specify the expression that the validated field must match, set the rule's comparisonTarget configuration property. Assign a function to this property. The validated value will be compared to the function's return value. The comparison will be performed by using the operator that is set for the comparisonType property.
See Also
comparisonTarget
The rule is valid if the comparison between the validated value and the return value of the comparisonTarget function evaluates to true. The operator specified by the comparisonType property is used to compare values.
comparisonType
Specifies the operator to be used for comparing the validated value with the target.
message
An error message can be specified as follows:
Hard-code the message
App.js- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { TextBox } from 'devextreme-react/text-box';
- import {
- Validator,
- CompareRule
- } from 'devextreme-react/validator';
- class App extends React.Component {
- render() {
- return (
- <TextBox>
- <Validator>
- <CompareRule
- message="My custom message" />
- </Validator>
- </TextBox>
- );
- }
- }
- export default App;
Hide the message
App.js- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { TextBox } from 'devextreme-react/text-box';
- import {
- Validator,
- CompareRule
- } from 'devextreme-react/validator';
- class App extends React.Component {
- render() {
- return (
- <TextBox>
- <Validator>
- <CompareRule
- 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.light.css';
- import { TextBox } from 'devextreme-react/text-box';
- import {
- Validator,
- CompareRule
- } from 'devextreme-react/validator';
- class App extends React.Component {
- render() {
- return (
- <TextBox>
- {/* The error message will be "Passwords do not match" */}
- <Validator name="Passwords">
- <CompareRule} />
- </Validator>
- </TextBox>
- );
- }
- }
- export default App;
If you have technical questions, please create a support ticket in the DevExpress Support Center.