Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Asynchronous Validation #9319

Open
NickMitrokhin opened this issue Aug 16, 2019 · 12 comments
Open

Asynchronous Validation #9319

NickMitrokhin opened this issue Aug 16, 2019 · 12 comments
Assignees

Comments

@NickMitrokhin
Copy link
Contributor

@NickMitrokhin NickMitrokhin commented Aug 16, 2019

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.

invalid

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:

pending

Try It

Live Sandbox

jQuery
Angular
React
Vue

Installation

npm install devextreme@19.2.2-beta

We need Your Feedback

Take a Quick Poll

Do the new asynchronous validation features meet your needs?

@NickMitrokhin

This comment has been minimized.

Copy link
Contributor Author

@NickMitrokhin NickMitrokhin commented Oct 7, 2019

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

This comment has been minimized.

Copy link

@Bykiev Bykiev commented Oct 9, 2019

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

@NickMitrokhin

This comment has been minimized.

Copy link
Contributor Author

@NickMitrokhin NickMitrokhin commented Oct 9, 2019

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

This comment has been minimized.

Copy link

@Bykiev Bykiev commented Oct 9, 2019

@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

This comment has been minimized.

Copy link
Contributor Author

@NickMitrokhin NickMitrokhin commented Oct 9, 2019

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

This comment has been minimized.

Copy link

@Bykiev Bykiev commented Oct 16, 2019

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

@San4es

This comment has been minimized.

Copy link
Member

@San4es San4es commented Oct 16, 2019

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

@Bykiev

This comment has been minimized.

Copy link

@Bykiev Bykiev commented Oct 16, 2019

@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

This comment has been minimized.

Copy link
Member

@San4es San4es commented Oct 16, 2019

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

This comment has been minimized.

Copy link

@steelcg steelcg commented Oct 31, 2019

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

This comment has been minimized.

Copy link
Contributor Author

@NickMitrokhin NickMitrokhin commented Oct 31, 2019

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

@San4es San4es added the 20_1 label Mar 6, 2020
@NickMitrokhin

This comment has been minimized.

Copy link
Contributor Author

@NickMitrokhin NickMitrokhin commented Mar 6, 2020

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 devextreme@20.1.2-alpha-20064-2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.