如何验证中继表单?

Question

我想同时使用 jquery 中继器和 jquery 验证库。这是我的验证规则：

$("#myForm").validate({
rules: {
title: {
required: true
},
subject: {
required: true
}
},
messages: {
title: {
required: "Enter title!"
},
subject: {
required: "Enter subject!"
}
},
errorElement: 'div',
errorPlacement: function (error, element) {
var placement = $(element).data('error');
if (placement) {
$(placement).append(error)
} else {
error.insertAfter(element);
}
},
submitHandler: function (form) {
submitForm();
return false;
}
});

但它不起作用。因为 jquery 中继器创建输入名称，如数据[0][标题]、数据[1][标题]、数据[0][主题]、数据[1][主题]等。因此，我的规则不仅命名标题或主题就不起作用。如何验证这些名称，如数据[*][标题]和数据[*][主题]？

Answer 1

如我的评论中所述，当name未知时，您无法从.validate()方法中设置规则。 (如果缺少name，则无法使用此插件。

请记住，此插件必须使用独特的names才能运行。以下任何技术仍然需要在每个领域进行独特的name。

如果需要设置像required这样的简单规则，则可以使用data属性、HTML5 或类内联声明它们。required="required"、class="required"等，插件会自动拾取它们。

<input name="foo" required="required" ....

如果无法更改内联 HTML，则可以使用.rules()方法向这些字段添加规则，只要它们在您调用.rules('add')时存在。

1. 调用表单上的.validate()以使用您的选项初始化插件。

2. 使用 Repeater 或任何方法创建新字段，确保所有新字段都具有唯一的name属性。

3. 调用附加到 jQuery 选择器的 jQuery.each()的内部.rules('add')，例如这些新字段上的"end with"。 这会将required规则动态添加到所有字段，其name以字符串[subject]...

   $("[name$='[subject]']").each(function() {
   $(this).rules('add', 
   required: true,
   messages: {
   required: "optional custom message"
   });
   });