jquery - フォームを 2 / 3 セクションに変換し、フォームの検証を維持しますか?

Question

20 個以上のフィールドを持つフォームがあり、iframe にバインドされているため、フォームを複数のセクションに分割する必要があります。どうすればこれを行うのが最善で、検証を維持できますか?

私はそれをシンプルに保とうとしており、それぞれが7つのフォームフィールドと最後のセクションに送信ボタンを保持する3つのdivを持つことを考えていました. しかし、セクションを参照して、セクションごとの検証を機能させるにはどうすればよいですか?

Answer 1

これを行う 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 を表示できます。