jQuery对表单的“实时”验证

Question

我最近已经完全重新编码了我的网站注册表格，许多用户抱怨说，注册后，他们只会填写表格以告知用户名已被使用，或者其他错误意味着他们必须重新输入所有内容。这些信息。

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

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

对于表单的每个区域，我都在表单旁边添加了一个div类 ，我希望我可以根据用户键入的内容进行隐藏/取消隐藏。

我的问题是，如果我对所有字段使用相同的类，那么肯定会在使用诸如innerHTML函数之类的内容时更新所有错误字段？

jQuery远非我的强项，我将非常感谢您的帮助。 如果需要，我将添加更多信息，谢谢！

Answer 1

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

Answer 2

基本上，您对诸如keyUp或blur事件进行验证，当验证完成时，您可以通过从input元素转到包含input和error div的元素来遍历适当的div，然后按其类搜索error div。 这样，您可以确保仅避免错误适用于适当的元素。

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

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

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

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