Vue Validator - AsyncRule
A custom validation rule that is checked asynchronously. Use async rules for server-side validation.
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.
See Also
ignoreEmptyValue
If true, the validationCallback is not executed for null, undefined, false, and empty strings.
message
An error message can be specified as follows:
Hard-code the message
App.vue- <template>
- <DxTextBox>
- <DxValidator>
- <DxAsyncRule
- message="My custom message"
- />
- </DxValidator>
- </DxTextBox>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxTextBox } from 'devextreme-vue/text-box';
- import {
- DxValidator,
- DxAsyncRule
- } from 'devextreme-vue/validator';
- export default {
- components: {
- DxTextBox,
- DxValidator,
- DxAsyncRule
- }
- }
- </script>
Hide the message
App.vue- <template>
- <DxTextBox>
- <DxValidator>
- <DxAsyncRule
- message=""
- />
- </DxValidator>
- </DxTextBox>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxTextBox } from 'devextreme-vue/text-box';
- import {
- DxValidator,
- DxAsyncRule
- } from 'devextreme-vue/validator';
- export default {
- components: {
- DxTextBox,
- DxValidator,
- DxAsyncRule
- }
- }
- </script>
Display the editor's name in the message
App.vue- <template>
- <DxTextBox>
- <!-- The error message will be "Password is invalid" -->
- <DxValidator name="Password">
- <DxAsyncRule />
- </DxValidator>
- </DxTextBox>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxTextBox } from 'devextreme-vue/text-box';
- import {
- DxValidator,
- DxAsyncRule
- } from 'devextreme-vue/validator';
- export default {
- components: {
- DxValidator,
- DxAsyncRule
- }
- }
- </script>
Get the message from the server
See the example in the validationCallback description.
reevaluate
Indicates whether the rule should always be checked for the target value or only when the value changes.
validationCallback
Name | Type | Description |
---|---|---|
column |
The column to which the cell being validated belongs. Exists only when you validate a built-in editor in the DataGrid or TreeList. |
|
data |
The current row's data. Exists only when you validate a DataGrid or TreeList cell's value. |
|
formItem |
The form item being validated. Exists only when you validate a built-in editor in the Form UI component. |
|
rule |
The rule being checked. |
|
validator |
The Validator object that initiated the validation. |
|
value | | |
The validated value. |
The following code shows a generic validationCallback implementation for a server that returns a JSON response. The function sends the value that should be validated to the server. The response includes a flag that indicates validity, and optionally an error message that is used if validation fails.
- <template>
- <DxTextBox>
- <DxValidator>
- <DxAsyncRule
- :validation-callback="validateAsync"
- />
- </DxValidator>
- </DxTextBox>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxTextBox } from 'devextreme-vue/text-box';
- import {
- DxValidator,
- DxAsyncRule
- } from 'devextreme-vue/validator';
- import 'whatwg-fetch';
- export default {
- components: {
- DxTextBox,
- DxValidator,
- DxAsyncRule
- },
- methods: {
- validateAsync(params) {
- return new Promise((resolve, reject) => {
- fetch("https://mydomain.com/MyDataService", {
- method: 'POST',
- body: JSON.stringify({ data: params.value })
- })
- .then(response => {
- if (!response.ok) {
- throw new Error(`HTTP error: ${res.status} ${res.statusText}`);
- }
- return response.json();
- })
- .then(res => {
- // res.message contains validation error message
- res.isValid ? resolve() : reject(res.message);
- // ===== or if "res" is { isValid: Boolean, message: String } =====
- resolve(res);
- })
- .catch(error => {
- console.error("Server-side validation error", error);
- reject("Cannot contact validation server");
- });
- });
- }
- }
- }
- </script>
If you have technical questions, please create a support ticket in the DevExpress Support Center.