How to abort synchronous ajax request in jquery?

Question

I'm trying to integrate an ajax request inside validator.addMethod jquery validation.

Let's say I have an input field like

Amount : [ text box ]

And its validation rules are

$('.form').validate({
....
...
amount:{ amt_val : true }
..
});

And the add validator method is

$.validator.addMethod("amt_val", function(value, element){
 $.ajax({
  type: 'POST',
  async:false,
  ...
  ...
  success:function(res){
   // return true or false
  }
 });
});

Note : The reason why I'm using async:false here is, validator returns false itself before the ajax request completes.
So every time I enter an amount it will validate through ajax. I want to abort previous ajax requests if I continuously type amount value.
I tried this solution like

var xhr = null;
$.validator.addMethod("amt_val", function(value, element){
if(xhr != null) { xhr.abort(); xhr = null; }
 xhr = $.ajax({
  type: 'POST',
  async:false,
  ...
  ...
  success:function(res){
   // return true or false
  }
 });
});

But it works only on async requests. Any ideas ?

See here https://stackoverflow.com/questions/7511342/is-it-possible-to-abort-a-synchronous-xmlhttprequest — Bud Damyanov, Sep 12 '17 at 10:57
Possible duplicate of [Is it possible to abort a synchronous XmlHttpRequest?](https://stackoverflow.com/questions/7511342/is-it-possible-to-abort-a-synchronous-xmlhttprequest) — Bud Damyanov, Sep 12 '17 at 10:57
You never, *never* want to do synchronous Ajax requests. There is not a single valid use case for that. The jQuery validation plugin supports async validation through the `remote` method. https://jqueryvalidation.org/remote-method/ — Tomalak, Sep 12 '17 at 11:01
*The reason why I'm using async:false here is, validator returns false itself before the ajax request completes.* your just doing it wrong [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Liam, Sep 12 '17 at 11:07
Possible duplicate of [Abort Ajax requests using jQuery](https://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery) — Liam, Sep 12 '17 at 11:07
Hi Tomalak, I took a look at remote method, shall we do some other code with the response inside remote success function? because the error or success messages are also dynamic. — Deepak M, Sep 12 '17 at 11:21

score 0 · Answer 1 · answered Jun 16 '19 at 07:07

First of all stop using synchronous request. You know the reasons very well. Next for validation purposes, you may use call back functions which are called only when async ajax completes.

Addressing your question, using synchronous ajax request would result in blocking the UI until the request completes. So both logically and technically, you can only do a next synchronous request when the previous synchronous request completes. So aborting a previous sync ajax request is impossible!!

Instead you may simulate the validation ajax call only when the user completes the input. This can be achieved by reading an enter key pressed in the input of placing a validate button next to the input element.

Hope it helps.

How to abort synchronous ajax request in jquery?

1 Answers1