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

Question

我有一个非常非常长的形式(大约300个字段),我使用这个光滑的jQuery插件表单向导分解成不同的部分.如果将表单分组到不同的字段集中,FormWizard将一次自动显示一个部分,并使用Next超链接将您带到下一部分:
<a id="step0Next" class="next" href="#">Next ></a>

我的问题是:使用jQuery Validation插件,如何在用户单击Next时验证每​​个字段集,依此类推,而不是使用Submit按钮.换句话说,如何将触发事件从提交更改为六个不同的六个不同的超链接？

感谢您帮助这个新手.

Answer 1

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

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

2)在这种情况下,获取当前的字段集.你的插件可能会为你追踪这个,但我不熟悉它.

3)在fieldset中搜索其所有输入并单独验证它们.

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]));
 }
});

Answer 2

如果我理解正确的话，为什么不这样做：

使用 jQuery 验证插件来查看用户输入是否正确，然后是否使转到表单下一部分的链接可见。

例如，创建一个 span 标签，如下所示：

<span class="formLink"></span>

然后，当 jQuery 验证插件检查用户输入是否正确时，执行如下操作：

$(".formLink").html('<a id="step0Next" class="next" href="#">Next</a>');

如果验证插件检测到用户输入中有错误，那么您可以在同一标签中输出错误，如下所示：

$(".formLink").text("ERROR: You have not supplied the correct information.");