I have a page which does AJAX validation of an email before continuing on to the next page, using the HTML5 setCustomValidity() method [using the webshims library for older browsers].
For this to work, I set the async option to false in the $.ajax() call to make it synchronous, blocking the page pending the AJAX response, as otherwise the form submits before the ajax call returns, rendering the validation ineffectual.
<script>
function validateEmailRegistered(input) {
if (input.setCustomValidity === undefined) return;
var err = 'Email address not found';
$.ajax({
url: 'email-is-registered.php',
data: { email: input.value },
async: false,
success: function(data) {
var ok = data=='true';
input.setCustomValidity(ok ? '' : err)
}
});
}
</script>
<form method="get" action="nextpage.php">
<input name="email" id="email" type="email" required
onChange="validateEmailRegistered(this)">
<button type="submit">go</button>
<form>
I see that the async option is to be deprecated as of jQuery 1.8.
How can I achieve this blocking action without the async option?