jQuery change event sequence

Question

I have added an ajax validation to a textarea on my form, and initiate it using onblur in the html. However I have noticed that if I go to the submit the onblur event doesn't fire. Having read a lot of background I found a trick with setTimeout which I think ought to work by delaying the submit until after the blur. But I'm obviously doing something wrong or have misunderstood whats actually going on because its not working.

I have coded the following in a document ready block in a file read into my page in the footer:

$('button[type="submit"]').click(function(){
    setTimeout(() => this,0);
    $("#description").trigger('blur');
});

Can anyone see/explain my problem please?

Answer 1

As i understand you send text field value to the server with AJAX to validate it.

The function setTimeout wont help in your case. You have to wait for validation results first. And submit the form once validation result arrived.

So your code might look like this:

var isValid;

$("#description").on('blur', function(event){
    isValid = false;
    startValidation().then(function(){
        isValid = true;
        form.submit();
    });
});

$('button[type="submit"]').on('click', function(event){
    if (!isValid){
        event.preventDefault();
        return false;
    }
});