OnBlur causes Submit button to be clicked Twice

Question

I have a form which is doing client side js validation via ajax. Its a simple send email (contact) form with 3 fields, name, email and message. if you try clicking submit without proper validation, error msg divs become visible. Each of these 3 inputs call js functions via onblur. If I try entering the proper input then clicking submit once, it doesnt work. Click a second time and it works.

Reason why is I need to unfocus from that field so that the onblur validation function processes THEN it submits. This seems like it should be a common problem. Submit calls a php script which makes an ajax call to validate the 3 fields and if correct, submits the email while displaying a "success" msg.

Any idea how I should stop this double clicking submit button??

I didnt provide code because I assume it will make this too long, but for help.. the 3 fields return false if bad and true if good, then the php script just checks for 2 of the fields if they are empty and the email field if its formatted correctly via regex. Then if so uses the mail function and then prints "success" in a div.

Answer 1

I just solved the problem. Onblur was definitely the issue. I changed onblur to onkeyup that way after each key is pressed it re-validates everything, therefore once I try to click on "Submit" it has already validated the input client side and it immediately runs the server side script.
Thanks for all the input everyone.

Answer 2

I think you have no alternative than to (when submit is clicked), flag that submit was clicked, and then in the validator call backs, if all is valid, check the flag, if it's set, then submit the form.

document.formname.submit();

Answer 3

you may use

$(document).ajaxComplete(function(){
                form.submit();     
                });

Which will wait until any ajax request completes.