JavaScript/jQuery Validator Validation Rules

This section lists validation rules that can be used within the dxValidator.

View Demo

AsyncRule

A custom validation rule that is checked asynchronously. Use async rules for server-side validation.

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

Object

To specify the async rule, set the type to "async" 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.

Validation rules are checked in the following order: All the synchronous rules are checked in the same order as in the validationRules array. Then, all the async rules are checked simultaneously.

View Demo

See Also

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

CustomRule

A rule with custom validation logic.

import { CustomRule } from "devextreme/common"
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

EmailRule

A validation rule that requires that the validated field match the Email pattern.

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

Object

View Demo

DevExtreme components use the following Email pattern:

pattern: /^[\d\w._-]+@[\d\w._-]+\.[\w]+$/i
See Also

NumericRule

A validation rule that demands that the validated field has a numeric value.

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

Object

View Demo

See Also

PatternRule

A validation rule that requires that the validated field match a specified pattern.

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

Object

To specify the regular expression that the validated field must match, set the rule's pattern configuration property.

View Demo

NOTE
If you apply a pattern rule to a DateBox component, specify dateSerializationFormat so that the format of the validated value is a string.
See Also

RangeRule

A validation rule that demands the target value be within the specified value range (including the range's end points).

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

Object

To specify the range that the validated value must match, set the rule's min and max configuration properties. Note that the specified range can be on a date-time or numeric scale. To validate a value against a string length, use the stringLength rule.

View Demo

See Also

RequiredRule

A validation rule that demands that a validated field has a value.

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

Object

Use this rule type to ensure the target editor value is specified. The rule will be broken in the following cases.

  • If the validated value is null, false, or undefined.
  • If the specified value has a type that is not expected for the target field (e.g., a string for the DateBox UI component).

View Demo

See Also

StringLengthRule

A validation rule that demands the target value length be within the specified value range (including the range's end points).

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

Object

To specify the range that the validated value length must match, set the rule's min and max configuration properties.

NOTE
This rule validates string values or the values that can be cast to a string.

View Demo

See Also