Question

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

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

感谢您帮助解决这个问题。

Answer 1

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

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

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

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.");

Answer 3

以下是jquery论坛的一个很好的答案：

http://forum.jquery.com/topic/validation-plugin-validating-by-parts

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

3 个答案: