jQuery“实时”验证表单

Question

我最近完全记录了我的网站注册表格，我的很多用户抱怨说，在注册时，他们会填写表单，只是被告知已经使用了用户名，或者其他一些错误意味着他们会有重新输入所有这些信息。

我今天开始设计和编码新的注册页面，我的用户得到的响应是它看起来更加用户友好，并且当包含“实时”验证时，它将是正确的。

无论如何，这是我的注册页面的外观，以及包含错误的div的位置;

对于表单的每个区域，我在其旁边添加了相同的div类，我希望我可以隐藏/取消隐藏，具体取决于用户输入的内容。

我的问题是，当然，如果我对所有字段使用相同的类，当我使用像innerHTML函数这样的东西时，它会更新所有错误字段吗？

jQuery远非我的强项，我真的很感激任何帮助。如果需要，我会添加更多信息，谢谢！

Answer 1

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

Answer 2

基本上你验证像keyUp或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回调中... 成功验证也需要相同的例程：删除文本并隐藏错误div ...