Devextreme: Asynchronous Validation

[NickMitrokhin]

The Problem

The DevExtreme validation API does not support async calls and cannot be used to implement server-side validation. You can apply the solution described in the Server-Side Validation article, but it does not allow displaying the current validation status in the editor being validated.

The Proposed Solution

We plan to add a new async validation rule whose API is similar to the custom validation rule's API. The only difference is that the validationCallback function should return the Promise object.

Validation API

Add the async rule to the dxValidator.validationRules array:

validationRules: [
    ...,
    {
        type: "async",
        message: "Value is invalid",
        validationCallback: function(params) {
            return new Promise(...);
        }
    }
]

Fulfill the Promise with true if the value is valid or false otherwise. If the server sends the validation error message, fulfill the Promise with the following object:

{
    isValid: false,
    message: 'Your error message'
}

The Promise can also be rejected with an error. The dxValidator displays all the error messages.

Rule-processing order

All synchronous rules are checked first. The checks are run rule by rule in the sequence the rules have in the validationRules array. If these checks are successfull, the validation engine checks all asynchronous rules simultaneously.

We also plan to add a status option to the validation result that shows the status of validation requests:

• "PENDING" - At least one async rule is not fulfilled or rejected yet.
• "VALID" - No validation rules were broken.
• "INVALID" - At least one validation rule was broken.

While the status is "PENDING", the editor displays a loading indicator:

Try It

Live Sandbox

jQuery
Angular
React
Vue

Installation

npm install [email protected]

We need Your Feedback

Take a Quick Poll

Do the new asynchronous validation features meet your needs?

[NickMitrokhin]

A new DevExtreme version 19.2-beta is available now. You can test this feature using examples that reside in the Live Sandbox section of the discussion page.

[Bykiev]

@NickMitrokhin, can you please publish this update on bower too?

[NickMitrokhin]

can you please publish this update on bower too?

As you know Bower is deprecated and even Bower creators recommend using any other package managers. That is why we did not publish the Beta version using Bower. Would you please elaborate on why you cannot use NPM in your case? Please describe the issue in greater detail.

[Bykiev]

@NickMitrokhin, we're aware of bower was deprecated, I don't see any problems to migrate on npm. The only reason we're still using bower because it's easy to manage bower packages in VS 2017 same way as NuGet. Thanks!

[NickMitrokhin]

Thank you for your clarification. At the moment, we do not have plans to publish DevExtreme 19.2 on Bower. So, I recommend that you use NPM in your case.

[Bykiev]

@NickMitrokhin, how to remove green mark on success validation?

[San4es]

@Bykiev
Currently, it is possible only via overriding CSS. Would you share with us your scenario where this may be needed?

[Bykiev]

@San4es, I don't like that fields with async validation rules has green marks, but other validation rules doesn't have it. From UI side they should be looking the same way, I think.

[San4es]

Thank you for the clarification. Your vote is counted :) To make a decision on adding an API for displaying the validation mark, we will collect additional feedback from our customers regarding their cases and requirements.

[steelcg]

A good solution for async validation, but why that isn't supported in DxDataGrid whit batch edit mode?
E1057 - The dxDataGrid widget does not support asynchronous validation rules in the "batch" edit mode. See:
http://js.devexpress.com/error/19_2/E1057

[NickMitrokhin]

@steelcg,

Async validation is not supported for the Batch, Cell, and Row editing modes because dxDataGrid requires significant changes in its implementation. We are planning to support "async" validation rules for these modes in one of the next major versions.

[NickMitrokhin]

Starting with 20.1, async validation will be supported in DataGrid for Row, Batch and Cell editing modes. You can test it in v20.1.2-alpha. To install this version, execute the following command:

npm install [email protected]

[San4es]

Thanks to everybody who gave us early feedback on this feature. The feature is now available in the v19.2 release (for editors and Form), and in the v20.1 release (for Data Grid and Tree List). I'm closing this thread. In the case of bugs or questions, feel free to create new GitHub issues or tickets in our Support Center.