jQuery 验证未绑定到 keyup 事件

Question

我正在制作 "contact me" 页面，并进行了 jQuery 验证。当用户单击新页面时，我的主要内容框会重新加载 ajax 以更改内容。我现在遇到的问题是为验证函数绑定一个事件处理程序。我现在得到的是

$(document).ready(function(){
    $('body').bind('focus focusout keyup', function() {
        $('#contact_me').validate({

但它没有按预期工作。我必须开始输入，然后单击输入字段，然后在它开始验证输入字段值之前再次单击它。我希望它在焦点 focusout 和 keyup 上进行验证。我认为问题出在事件处理程序上。有什么建议吗？

这是一个 JSfiddle 脚本：https://jsfiddle.net/z6h9d028/4/

我现在可以看出事件处理程序不是问题所在。当我在输入字段中键入时，它不会验证值，直到我点击开箱即用。在第一次验证之后，我也在 keyup 上工作。我怎样才能让我立即开始使用 keyup？

编辑 2： 已更新 fiddle：https://jsfiddle.net/z6h9d028/7/

现在快要工作了！我只需要在单击提交按钮时显示所有错误消息。并找到一种方法来在您键入一个字符时显示错误消息，然后在需要输入字段时将其删除（如果您键入一次，它会显示它，然后删除，再次键入并删除。但不是第一次）

Answer 1

您不需要设置自己的事件侦听器，或者至少如果您这样做，您不应该在 .validate() 方法上使用它们（请参阅下面的替代方法）。

删除整个 $('body').bind() 部分，并将以下内容添加到您的验证设置对象中：

onkeyup: function(element) {
  $(element).valid();
  // As sparky mentions, this could cause infinite loops, should be this:
  // this.element(element);
},

这也应该更好，因为它可以让您在如何处理 onkeyup 事件方面有一些额外的自由，例如如果您不希望它是瞬时的，则添加一个 setTimeout。

Fiddle: https://jsfiddle.net/z6h9d028/5/

在 onkeyup 中，您还可以调用 $('#contact_me').valid()，这将重新验证整个表单，尽管这可能不是您想要的结果。

编辑： Sparky 也很有帮助地提到 jquery-validate 默认情况下确实允许 keyup 事件，但它只在第一次提交后才这样做：

另一种方法是像现在一样设置验证的详细信息，不使用 onkeyup 函数，然后设置自己的侦听器和运行 $(element).valid():

$('#contact_me').validate({
  rules: {
    // ...
  }
});

$('input').on('focus focusout keyup', function () {
  $(this).valid();
});

编辑您的其他问题：

您的 errorPlacement 函数正在做一些奇怪的事情。它如何决定什么是下一个兄弟姐妹似乎工作不正确。此外，您手动将错误 [=52=] div 添加到 DOM 中，但它们实际上是由插件生成的。所以真的，你正在创建两者，然后试图展示它们，有点覆盖插件，有点不，整个事情变得疯狂。

我认为解决方案是删除那些错误 div，删除 errorPlacement 函数，然后修改 CSS 选择器以获取任何以“-error”结尾的 id，即插件生成的内容。所以 [id$='-error'] 而不是 .error_message

https://jsfiddle.net/z6h9d028/8/

jQuery 验证未绑定到 keyup 事件

jQuery validate not binding to keyup events

javascript

jquery

jquery-validate

编辑您的其他问题：