JavaScript/jQuery Validator - CompareRule

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.

$(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.',
        });
});

<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 { }

<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>

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>
    );
}

View Demo

See Also

• Data Validation

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.

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.html

  app.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.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

  jQuery

  index.js

  $(function() {
      $("#textBox").dxTextBox({ ... })
          .dxValidator({
              type: "compare",
              message: ""
          });
  });

  Angular

  app.component.html

  app.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.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

  jQuery

  index.js

  $(function() {
      $("#textBox").dxTextBox({ ... })
          .dxValidator({
              name: "Passwords", // The error message will be "Passwords do not match"
              validationRules: [{
                  type: "compare"
              }]
          });
  });

  Angular

  app.component.html

  app.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.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;