I have a form with 13 text input boxes. I'm trying to validate each one as the user tabs out of the field like so:
My problem is that the cursor has moved to the next field by the time this runs, so when the line "$('#conversionData').focus().select();" runs to move the cursor back to the field with the error, it triggers the blur event on the following field resulting in an error message for a field that, as far as the user is concerned, they haven't even tried to enter data yet.
The only solution I can think of is to wait and do all validation after the submit button is clicked, resulting in possibly multiple error messages at once. I know that most websites validate after you click the submit button so maybe that's what users expect and I shouldn't break that paradigm?
Am I missing another technique for validating each field one at a time? Waiting for the button to be clicked seems like late in the process for validation, but that's just my personal opinion.
"The good news about computers is that they do what you tell them to do. The bad news is that they do what you tell them to do." -- Ted Nelson
As you are a already using jQuery I see no reason that you shouldn't be using the validation plugin.
It waits until the form is submitted to validate, but once that happens, each field is validated individually. It will even remove error messages as the input of the individual fields satisfy the validation rules.
I think that'd be a much better approach than trying to roll your own.