brokenRule
A rule that failed to pass the check. Contains the first item from the brokenRules array.
brokenRules
An array of the validationRules that failed to pass the check.
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
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
$(function() {
const 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
<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
<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
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;pendingRules
An array of async rules whose promises are not fulfilled or rejected. Contains items only when the status is "pending".
status
This property 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
Array<RequiredRule | NumericRule | RangeRule | StringLengthRule | CustomRule | CompareRule | PatternRule | EmailRule | AsyncRule>