针对多个字段集的 jQuery 验证，如何使用不同的事件来触发每个部分的验证

Question

我有一个非常非常长的表单(大约 300 个字段)，我使用这个光滑的 jQuery plugin Form Wizard 将其分解为不同的部分。 。如果您将表单分组到不同的字段集中，FormWizard 将自动一次显示一个部分，并使用“下一个”超链​​接将您带到下一个部分:
<a id="step0Next" class="next" href="#">Next ></a>

我的问题是这样的:使用 jQuery 验证插件，当用户单击“下一步”等时，如何验证每个字段集，而不是使用“提交”按钮。换句话说，如何将触发事件从“提交”更改为六个不同部分的六个不同的超链接？

感谢您帮助这个新手。

Answer 1

我认为这不是一个简单的解决方案，但我在当前的项目中做了类似的事情。

1) 将事件绑定(bind)到每个下一个链接。在这种情况下，您将使用 jquery 验证插件的 element 方法手动验证字段集中的每个输入。

2) 在事件中，获取当前的字段集。您的插件可能可以为您跟踪这一点，但我对此并不熟悉。

3) 在字段集中搜索所有输入并单独验证它们。

4) 如果字段集中的任何输入无效，请不要前进到下一页。

每当单击下一个链接时，以下代码段都会手动验证字段集中的非隐藏输入。它不显示如何检索字段集和验证器，也不显示如何在表单无效时停止前进到下一个字段集。您的表单插件可能会对此有所帮助。从这个示例中您应该得到的是，您可以使用 jquery 验证插件手动验证字段集中的所有输入。

$('.next').bind('click', function() {
 var inputs = myFieldset.find(':input:not(:hidden)');
 for (var i = 0; i < inputs.length; i++) {
   myValidator.element($(inputs[i]));
 }
});