Angular AJAX validator. Best way to prevent submission during the validation process?

Question

With Angular forms, it's easy to see if the form is valid or $ is invalid. This is great, and I only allow the user to submit the form if it is valid.

But is there an easy way to indicate that it is in the process of verification? (and we don’t know whether this is valid or invalid)

This is advisable if you check (for example) that the email address is valid. I do not want to mark the field as an invalid value until the AJAX call returns (otherwise I could show the error to the user if it is not). But I do not want them to be able to send if we are still checking the email address ...

Any suggestions?

The code I use for my AJAX validators is based on AngularJS: integration with server-side validation (thanks to @BenLesh).

function linkFunc(scope, el, attr, ctrl) { // When the scope changes, check the email. scope.$watch(attr.ngModel, validate); function validate (value) { // Show as valid until proven invalid ctrl.$setValidity('validateEmail', true); // if there was a previous attempt, stop it. if(timeoutId) { clearTimeout(timeoutId); } timeoutId = setTimeout(function() { // Make $http call and $setValidity $http.get(url) .then(function(data) { ctrl.$setValidity('validateEmail', data.isValid); }); }, 200); } } 

Answer 1

You can disable the button while processing ajax request. You can have similar logic using fieldset too check the manual for fieldset for it.

 function validate (value) { ctrl.waitingForAjax = true; // disable the required part while waiting for the response // Show as valid until proven invalid ctrl.$setValidity('validateEmail', true); // if there was a previous attempt, stop it. if(timeoutId) { clearTimeout(timeoutId); } timeoutId = setTimeout(function() { // Make $http call and $setValidity $http.get(url) .then(function(data) { ctrl.$setValidity('validateEmail', data.isValid); ctrl.waitingForAjax = false; // you can enable your button once you got the response }); }, 200); } 

Then, in your opinion:

 <button ng-disabled="waitingForAjax" ../>