jQuery “live” validation of form

Question

I have recently completely recoded my site registration form, a lot of my users were complaining that upon registration, they would fill out the form only to be told that the username was already taken, or some other error that meant they would have to retype all of that information.

I set off today designing and coding the new registration page, and the resulting response from my users is that it looks more user friendly, and when the "live" validation is included, it will be just right.

Anyway, here is how my registration page looks, with the location of the divs that will contain errors;

For each area of the form, I have added the same div class next to it, which I hope I can then hide / unhide depending on what the user has typed in.

My issue is, surely if I use that same class for ALL of the fields, it will update ALL of the error fields when I use something like the innerHTML function?

jQuery is far from my strong point, and I would really appreciate any help. I will add more information if it is requested, thanks!

Answer 1

为什么不给每个字段一个ID并使用选择器#whatever而不是.whatever来访问每个特定字段？

Answer 2

basically you validate on events like keyUp or blur and when the validation finished you traverse the proper div by going up from the input element to the element that contains both, the input and the error div and then search for the error div by it's class. this way you'll be sure to only avitvate the error for the proper element.

assuming the element surrounding the input and error div (and propably label etc.) has the class element and the error div has the class error

$('input').blur(function() {

    // on error:
    $(this).parents('.element').find('.error').text('Some error occured').show();
});

if you validate using ajax the on-error stuff needs to be in the ajax callback ofc... also need the same routine for successful validation: remove text and hide error div...