Question

我正在使用jQuery验证创建一个“与我联系”页面。我的主要内容框重新加载了ajax，以便在用户点击新页面时更改内容。我现在遇到的问题是为validate函数绑定一个事件处理程序。我现在得到的是

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

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

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

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

编辑2： 更新了小提琴：https://jsfiddle.net/z6h9d028/7/

现在差不多了！我只需要在单击提交按钮时显示所有错误消息。并且在键入一个字符时找到显示错误消息的方法，然后在需要输入字段时将其删除（如果键入一次则显示它，然后删除，再次键入并删除。但不是第一次）< / p>

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。

小提琴：https://jsfiddle.net/z6h9d028/5/

在onkeyup内，您还可以拨打$('#contact_me').valid()，这将重新验证整个表单，但这可能不是您想要的结果。

编辑：Sparky还有帮助提到默认情况下jquery-validate确实允许键盘事件，但它只在第一次提交后才这样做：jQuery validate plugin: validate on blur() by default

另一种方法是在没有onkeyup功能的情况下设置验证的详细信息，然后设置自己的监听器并运行$(element).valid()：

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

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

关于您的其他问题的修改：

您的errorPlacement功能正在做一些时髦的事情。它是如何决定下一个兄弟是什么似乎工作不正确。此外，您手动将错误HTML div添加到DOM中，但它们实际上是由插件生成的。所以，真的，你要创造两者，然后试图展示它们，有点过度使用插件，有点不然，整个事情都会陷入疯狂。

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

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

jQuery验证不绑定到keyup事件

1 个答案:

关于您的其他问题的修改：