Instead of calling Ajax validations on focustout event, you can call it on click of your button and if Ajax returns true result then submit form programatically. Refer few sample code lines:
Html Part:
<form method="post" id="registration_form" name="registration_form" action="register.php">
EmailId: <input type="text" id="email_id" name="email_id">
<label class="error" for="username" id="globalErrorUsername"></label>
Username: <input type="text" id="username" name="username">
<label class="error" id="globalErrorEmail"></label>
<button type="button" id="register_btn" name="register_btn">Register</button>
</form>
Js Part:
$("#register_btn").click(function() {
//.valid function is useful when you are using jquery Validate library for other field validation
if ($('#registration_form').valid()) {
var email_id = $('#registration_form').find('#email_id').val(),
username = $('#registration_form').find('#username').val();
$.ajax({
beforeSend: function() {
$('#globalErrorUsername').html('');
$('#globalErrorEmail').html('');
}, //Show spinner
complete: function() { },
type : 'post',
url : 'check-user-existence.php',
dataType :'json',
data : 'email_id=' + email_id + '&username=' + username,
success:function(response) {
if(response.success == 1) {
//submit the form here
$("#registration_form").submit();
} else if (response.error == 1) {
if(response.details.username != undefined) {
$('#globalErrorUsername').show();
$('#globalErrorUsername').html(response.details.username);
}
if(response.details.email_id != undefined) {
$('#globalErrorEmail').show();
$('#globalErrorEmail').html(response.details.email_id);
$('#email_id').focus();
} else {
$('#username').focus();
}
}
}
});
} else {
return false;
}
return false;
});