Vue Validator Validation Result

A validation result.

Type:

Object

brokenRule

A rule that failed to pass the check. Contains the first item from the brokenRules array.

Type:

RequiredRule

|

NumericRule

|

RangeRule

|

StringLengthRule

|

CustomRule

|

CompareRule

|

PatternRule

|

EmailRule

|

AsyncRule

brokenRules

An array of the validationRules that failed to pass the check.

Type:

Array<RequiredRule | NumericRule | RangeRule | StringLengthRule | CustomRule | CompareRule | PatternRule | EmailRule | AsyncRule>

The validation rules are checked in the following order:

  • All the sync rules are checked in the same order as in the validationRules array. If a sync rule is broken, no further checks are performed and the brokenRules array contains only this rule.

  • If the sync rules successfully pass the checks, all the async rules are checked simultaneously. If any async rule is broken, it is added to the brokenRules array with other broken async rules.

See Also

complete

A promise that is fulfilled when all async rules are validated.

Type:

Promise<dxValidatorResult> (jQuery or native)

This promise exists only when the status is "pending". Check the status before you attach callback functions to that promise.

In the following example, a button validates an editor with an async rule. The status is checked in the onClick event handler:

jQuery
index.js
$(function() {
    var validationGroupName = "myValidationGroup"; 

    $("#textBox").dxTextBox({ ... })
        .dxValidator({
            validationGroup: validationGroupName,
            validationRules: [{ 
                type: "async", 
                validationCallback: function(params) {
                    // ...
                }
            }]
        });

    $("#button").dxButton({
        validationGroup: validationGroupName,
        onClick: function(e) {
            const res = e.validationGroup.validate(); 
            res.status === "pending" && res.complete.then((r) => {
                console.log(r.status);
            });
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-text-box>
    <dx-validator
        [validationGroup]="validationGroupName">
            <dxi-validation-rule type="async" 
                [validationCallback]="validateAsync">
            </dxi-validation-rule>
    </dx-validator>
</dx-text-box>

<dx-button 
    [validationGroup]="validationGroupName"
    (onClick)="validateEditor($event)">
</dx-button>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    validationGroupName = "myValidationGroup";

    validateEditor(e) {
        const res = e.validationGroup.validate(); 
        res.status === "pending" && res.complete.then((r) => {
            console.log(r.status);
        });
    }

    validateAsync(params) {
        // ...
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxValidatorModule,
         DxTextBoxModule,
         DxButtonModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxTextBoxModule,
        DxButtonModule,
        DxValidatorModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxTextBox>
        <DxValidator
            :validation-group="validationGroupName">
            <DxAsyncRule
                :validation-callback="validateAsync"
            />
        </DxValidator>
    </DxTextBox>

    <DxButton
        :validation-group="validationGroupName"
        @click="validateEditor()"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxTextBox } from 'devextreme-vue/text-box';
import { DxButton } from 'devextreme-vue/button';

import {
    DxValidator,
    DxAsyncRule
} from 'devextreme-vue/validator';

export default {
    components: {
        DxTextBox,
        DxButton,
        DxValidator,
        DxAsyncRule
    },
    data() {
        return {
            validationGroupName: 'myValidationGroup'
        }
    },
    methods: {
        validateAsync(params) {
            // ...
        },
        validateEditor(e) {
            const res = e.validationGroup.validate(); 
            res.status === "pending" && res.complete.then((r) => {
                console.log(r.status);
            });
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { TextBox } from 'devextreme-react/text-box';
import { Button } from 'devextreme-react/button';

import {
    Validator,
    AsyncRule
} from 'devextreme-react/validator';

const validationGroupName = "myValidationGroup";

const validateAsync = function(params) {
    // ...
};

const validateEditor = function(e) {
    const res = e.validationGroup.validate(); 
    res.status === "pending" && res.complete.then((r) => {
        console.log(r.status);
    });
});

class App extends React.Component {
    render() {
        return (
            <TextBox>
                <Validator
                    validationGroup={validationGroupName}>
                    <AsyncRule
                        validationCallback={validateAsync} />
                </Validator>
            </TextBox>

            <Button 
                validationGroup={validationGroupName}
                onClick={validateEditor} />
        );
    }
}
export default App;

isValid

Indicates whether all the checked rules are satisfied.

Type:

Boolean

NOTE
When you use async rules, isValid is true if the status is "pending" or "valid".

pendingRules

An array of async rules whose promises are not fulfilled or rejected. Contains items only when the status is "pending".

Type:

Array<AsyncRule>

status

Indicates the validation status.

Type:

String

Accepted Values: 'valid' | 'invalid' | 'pending'

This option can have one of the following values:

  • "valid" - all validation checks passed
  • "pending" - there are pending (not fulfilled or rejected) async rules
  • "invalid" - all validation checks are completed, but there are broken rules

validationRules

Validation rules specified for the Validator.

Type:

Array<RequiredRule | NumericRule | RangeRule | StringLengthRule | CustomRule | CompareRule | PatternRule | EmailRule | AsyncRule>

value

The value being validated.

Type: any