jquery - 将表单转换为 2 / 3 部分并保留表单验证？

Question

我有一个包含 20 多个字段的表单，现在我绑定到一个 iframe，我需要将表单分成更多部分。我怎样才能最好地做到这一点并且仍然保持验证？

我试图保持简单，并考虑拥有 3 个 div，每个 div 包含 7 个表单字段和最后一节中的提交按钮。但是我如何浏览这些部分并让每个部分的验证工作？

Answer 1

一种方法是将表单部分放在单独的 div 中，不要使用浏览器“导航”到单独的表单部分，而是使用 jQuery 来导航 div。

<form>
<div id="form1"><a href="#">form elements 1</a></div>
<div id="form2" style="display:none"><a href="#">form elements 2</a></div>
<div id="form3" style="display:none"><a href="#">for elements 3</a></div>
</form>

<script>
jQuery("a").click( function(){
    jQuery(this).parents("form:first").children("div").hide();
    jQuery(this).parent().show();
});
</script>

并在最后一个 div 中有您的提交按钮。

这将允许您使用 javascript 验证字段并向它们显示带有错误的 div。