React Validator - CompareRule
A validation rule that requires validated values to match a specified expression.
To specify a comparison expression, define the comparisonTarget function. Validator compares values to this function's return value. To configure which comparison operator Validator compares values to, specify the comparisonType property.
jQuery
$(function() { $('#password').dxTextBox({ ... }); $('#confirm-password').dxTextBox({ ... }) .dxValidator({ type: 'compare', comparisonTarget() { const passwordTextBox = $('#password').dxTextBox('instance'); if (passwordTextBox) { return passwordTextBox.option('value'); } return null; }, message: 'Passwords do not match.', }); });
Angular
<dx-text-box [(value)]="password" ></dx-text-box> <dx-text-box> <dx-validator> <dxi-validation-rule type="compare" [comparisonTarget]="passwordComparison" message="Passwords do not match." ></dxi-validation-rule> </dx-validator> </dx-text-box>
export class AppComponent { password = ''; passwordComparison = () => this.password; }
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
<script setup lang="ts"> import { ref } from 'vue'; import { DxTextBox } from 'devextreme-vue/text-box'; import { DxValidator, DxCompareRule } from 'devextreme-vue/validator'; const password = ref(''); function passwordComparison() { return password.value; } </script> <template> <DxTextBox v-model:value="password" /> <DxTextBox> <DxValidator> <DxCompareRule :comparison-target="passwordComparison" message="Passwords do not match." /> </DxValidator> </DxTextBox> </template>
React
import React, { useCallback, useMemo, useRef, useState } from 'react'; import { TextBox, type TextBoxTypes } from 'devextreme-react/text-box'; import { Validator, CompareRule } from 'devextreme-react/validator'; const [password, setPassword] = useState(''); const passwordComparison = useCallback(() => password, [password]); const onPasswordChanged = useCallback((e: TextBoxTypes.ValueChangeEvent) => { setPassword(e.value); }, [setPassword]) function App() { return ( <React.Fragment> <TextBox value={password} onValueChanged={onPasswordChanged} /> <TextBox> <Validator> <CompareRule message="Passwords do not match." comparisonTarget={passwordComparison} /> </Validator> </TextBox> </React.Fragment> ); }
See Also
comparisonTarget
Specifies the function whose return value is used for comparison with the validated value.
A value to be compared with the validated value.
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
Specifies the message that is shown if the rule is broken.
An error message can be specified as follows:
Hard-code the message
jQuery
index.js$(function() { $("#textBox").dxTextBox({ ... }) .dxValidator({ type: "compare", message: "My custom message" }); });
Angular
app.component.htmlapp.module.ts<dx-text-box> <dx-validator> <dxi-validation-rule type="compare" 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> <DxCompareRule message="My custom message" /> </DxValidator> </DxTextBox> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTextBox } from 'devextreme-vue/text-box'; import { DxValidator, DxCompareRule } from 'devextreme-vue/validator'; export default { components: { DxTextBox, DxValidator, DxCompareRule } } </script>
React
App.jsimport 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
jQuery
index.js$(function() { $("#textBox").dxTextBox({ ... }) .dxValidator({ type: "compare", message: "" }); });
Angular
app.component.htmlapp.module.ts<dx-text-box> <dx-validator> <dxi-validation-rule type="compare" 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> <DxCompareRule message="" /> </DxValidator> </DxTextBox> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTextBox } from 'devextreme-vue/text-box'; import { DxValidator, DxCompareRule } from 'devextreme-vue/validator'; export default { components: { DxTextBox, DxValidator, DxCompareRule } } </script>
React
App.jsimport 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
jQuery
index.js$(function() { $("#textBox").dxTextBox({ ... }) .dxValidator({ name: "Passwords", // The error message will be "Passwords do not match" validationRules: [{ type: "compare" }] }); });
Angular
app.component.htmlapp.module.ts<dx-text-box> <!-- The error message will be "Passwords do not match" --> <dx-validator name="Passwords"> <dxi-validation-rule type="compare"> </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 "Passwords do not match" --> <DxValidator name="Passwords"> <DxCompareRule /> </DxValidator> </DxTextBox> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTextBox } from 'devextreme-vue/text-box'; import { DxValidator, DxCompareRule } from 'devextreme-vue/validator'; export default { components: { DxValidator, DxCompareRule } } </script>
React
App.jsimport 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.