Vue Validator - CompareRule

A validation rule that requires validated values to match a specified expression.

import { CompareRule } from "devextreme/common"
Type:

Object

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
index.js
$(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
app.component.html
app.component.ts
app.module.ts
<dx-text-box
    [(value)]="password"
></dx-text-box>
<dx-text-box> 
    <dx-validator>
        <dxi-validator-validation-rule 
            type="compare"
            [comparisonTarget]="passwordComparison"
            message="Passwords do not match."
        ></dxi-validator-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
App.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
App.tsx
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

comparisonTarget

Specifies the function whose return value is used for comparison with the validated value.

Type:

Function

Return Value: any

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.

Type:

ComparisonOperator

Default Value: '=='

ignoreEmptyValue

If set to true, empty values are valid.

Type:

Boolean

Default Value: false

message

Specifies the message that is shown if the rule is broken.

Type:

String

Default Value: 'Values do not match'

You can configure an error message in the following ways:

  • Specify a hard-coded message:

    jQuery
    index.js
    $("#textBox").dxTextBox({
    // ...
}).dxValidator({
    type: "compare",
    message: "My custom message"
});
    Angular
    app.component.html
    app.module.ts
    <dx-text-box>
    <dx-validator>
        <dxi-validator-validation-rule
            type="compare"
            message="My custom message">
        </dxi-validator-validation-rule>
    </dx-validator>
</dx-text-box>
    import { DxValidatorModule, DxTextBoxModule } from 'devextreme-angular';
// ...

@NgModule({
    imports: [
        DxTextBoxModule,
        DxValidatorModule,
    ],
})
    Vue
    App.vue
    <template>
    <DxTextBox>
        <DxValidator>
            <DxCompareRule
                message="My custom message"
            />
        </DxValidator>
    </DxTextBox>
</template>

<script setup lang="ts">
import { DxTextBox } from 'devextreme-vue/text-box';
import { DxValidator, DxCompareRule } from 'devextreme-vue/validator';

</script>
    React
    App.tsx
    import { TextBox } from 'devextreme-react/text-box';
import { Validator, CompareRule } from 'devextreme-react/validator';

function App() {
    return (
        <TextBox>
            <Validator>
                <CompareRule
                    message="My custom message"
                />
            </Validator>
        </TextBox>
    );
}

  • Hide the message:

    jQuery
    index.js
    $("#textBox").dxTextBox({
    // ...
}).dxValidator({
    type: "compare",
    message: ""
});
    Angular
    app.component.html
    <dx-text-box>
    <dx-validator>
        <dxi-validator-validation-rule
            type="compare"
            message="">
        </dxi-validator-validation-rule>
    </dx-validator>
</dx-text-box>
    Vue
    App.vue
    <template>
    <DxTextBox>
        <DxValidator>
            <DxCompareRule
                message=""
            />
        </DxValidator>
    </DxTextBox>
</template>
    React
    App.tsx
    import { TextBox } from 'devextreme-react/text-box';
import { Validator, CompareRule } from 'devextreme-react/validator';

function App() {
    return (
        <TextBox>
            <Validator>
                <CompareRule
                    message=""
                />
            </Validator>
        </TextBox>
    );
}

  • Display the editor's name in the default message (for instance, "Passwords do not match"):

    jQuery
    index.js
    $("#textBox").dxTextBox({
    // ...
}).dxValidator({
    name: "Passwords",
    validationRules: [{
        type: "compare",
    }],
});
    Angular
    app.component.html
    <dx-text-box>
    <dx-validator name="Passwords">
        <dxi-validator-validation-rule
            type="compare"
        ></dxi-validator-validation-rule>
    </dx-validator>
</dx-text-box>
    Vue
    App.vue
    <template>
    <DxTextBox>
        <DxValidator name="Passwords">
            <DxCompareRule />
        </DxValidator>
    </DxTextBox>
</template>
    React
    App.tsx
    import { TextBox } from 'devextreme-react/text-box';
import { Validator, CompareRule } from 'devextreme-react/validator';

function App() {
    return (
        <TextBox>
            <Validator name="Passwords">
                <CompareRule />
            </Validator>
        </TextBox>
    );
}

type

Specifies the rule type. Set it to "compare" to use the CompareRule.

Type:

ValidationRuleType