OnClick event is bypassing onBlur event

Question

My code relies on onBlur to validate the userid, however if the user just types in the user and then directly click on submit button, the onBlur event is not firing.

<td><input type='text' name="USERID" onBlur="doValidateUserID(this)"></td>
<td><input type="button" name="assetSaveButton"  value="Save" onClick="doSomeStuff(this)"></td>

Below is pseudo ajax call

function doValidateUserID(userID) { 
// ajax call goes here
}

My problem is that doValidateUserID is not even being called after user types in the value and clicks on submit button. I tried with onChange instead of onBlur but in vain.

EDIT: Apparently adding alerts have changed the behaviour of events, now on clicking the save button , doValidateUserID is called but doSomeStuff is skipped altogether. I have to do another click to call doSomeStuff

Answer 1

The onblur will always be called before click, though since you do an ajax call inside of the handler the ajax result call will always be run after the click event since it is non blocking (unless you set it to be sync which I would advise against)

I would recommend blocking the submit button until the ajax has finished or deferring the submit until the verification completed

Hope this helps :)