javascript - 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

基本上你验证像keyUpor之类的事件blur，当验证完成时，你通过从输入元素上升到包含输入和错误 div 的元素遍历正确的 div，然后按它的类搜索错误 div。这样你就可以确保只为正确的元素避免错误。

假设输入和错误 div 周围的元素（以及可能的标签等）具有类element并且错误 div 具有类error

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

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

如果您使用 ajax 进行验证，则错误内容需要在 ajax 回调 ofc 中...还需要相同的例程才能成功验证：删除文本并隐藏错误 div...

Answer 2

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