1

我有这个 html

<form class="validate"><!-- various inputs here --></form>

而这个js

$("form.validate").validate({
  errorPlacement: function(error, element) {
    error.appendTo(element.closest("div.error_box"));
  },
  errorElement: "div",
  errorClass: "form_error"
});

然后假设，在某个事件（即单击按钮）之后，我加载了一个新表单（通过 ajax），就像上面那样。或者，我完全刷新了那部分代码，所以我的表单是全新的，我的验证丢失了。

我正在尝试对其附加/重新附加验证，而不是在 ajax 调用的成功回调上重新调用 validate() 。

有点像“旧”的 jquery live 方法；

我可以.on以某种方式使用吗？如果“on”方法可以将“事件”绑定到新元素，为什么我们不能应用整个验证？

4

2 回答 2

1

根据评论编辑并编辑 OP：

“在稍后出现的元素（即 新表单）上附加 jquery 验证的最聪明的方法是什么”

如果您正在谈论创建/加载一个全新的表单，那么 AFAIK，这是唯一的方法....validate()在您加载/创建新表单后立即调用...

$('#my_NEW_form').validate({
    // your options
});

如果您的所有表单共享相同的选项，您还可以使用该setDefaults方法一次以避免一遍又一遍地声明它们......

$.validator.setDefaults({ 
    // your repeated options
});

请参阅： http ://docs.jquery.com/Plugins/Validation/Validator/setDefaults#defaults

编辑2：

“我可以.on以某种方式使用吗？如果方法“on”可以将“事件”绑定到新元素，为什么我们不能应用整个验证？

因为它用于绑定events，而不是插件，并且... .validate()不是事件。 jQuery.on()用于自动将 a 绑定function到a，event因为 newelement是动态创建的。

同样，您从未解释过问题的目的……您为什么要这样做？保存代码？

回到我们开始的地方......简单地$('#newform').validate({/*options*/})在你的ajax success回调函数中调用与你必须放在其他任何地方的代码量完全相同。

原始答案如下。我将它留在原处是因为一些关于.validate()初始化的一般信息仍然适用。

我假设您的问题基本上是“如何将规则应用于动态添加的字段输入？”

“在稍后出现的元素上附加 jquery 验证的最聪明的方法是什么”

通过使用插件的内置rules('add')方法动态应用规则。

“有比在每个 AJAX 调用的 .success() 处理程序中再次调用 jquery validate 更好的方法吗？”

你实际上不应该再打电话.validate()。一次.validate()调用一次是为了初始化表单上的插件，再调用一次，不会改变规则。有一种方法。

在添加新字段元素的任何ajax success回调函数中，使用内置rules('add')方法。

$('#yourfield').rules('add', {
    required: true,
    // other rules,
    messages: { // optional
        required:  "your optional custom message"
    }
});

.each()如果您需要一次将规则应用于多个字段，请使用 jQuery ....

演示：http: //jsfiddle.net/ucYkY/

于 2013-03-10T15:31:58.997 回答
0

我建议使用Parsley.js，它使用 html5 数据属性，一切都由插件处理。

您所做的就是编写 html 并根据需要添加数据属性。非常声明性且不涉及 Javascript，除非您需要自定义验证功能

只要您的动态输入字段具有正确的数据属性，parsley 就会找到它们

于 2013-03-10T10:16:17.597 回答