フォームをdivに分割し、[次へ]ボタンを使用してそれらのセクションを購入して非表示にしました。また、jQuery検証プラグインを使用してすべての検証を行っています。
私が知る必要があるのは、セクションごとに検証する方法です。だからこれは私が持っているものです
2、3、および4はデフォルトで非表示になっているため、フォームの煩わしさが軽減されます。
個人情報の次のボタンをクリックすると、このdivが非表示になり、住所の詳細などが表示されます。
最後の画面にはフォームの送信ボタンがあり、フォーム全体を通常どおり検証しますが、ユーザーが先に進む前に各セクションを検証する必要があります。
これが私がうまくいくはずだと思ったものです:
CSS
.project-address {display:none;}
HTML
<form class="wpcf7">
<div class="project-details">
<h2>Project details</h2>
<label>Project name: </label><input type="text" class="reg-project-name" size="40" value="" name="projectName">
<div class="back-next"><span class="reg-next-button">Next</span></div>
</div>
<div class="project-address">
<h2>Project address</h2>
<label>Project address:</label><input type="text" class="reg-project-address" size="40" value="" name="projectAddress">
<div class="back-next"><span class="reg-next-button">Next</span></div>
</div>
</form>
JQUERY
//clicking the next button hides this section and shows the next section
jQuery('.project-details .reg-next-button').click(function() {
// jQuery(".project-details").slideUp();
// jQuery('.project-address').slideDown();
jQuery('.reg-project-name').validate({
debug: true,
rules: {
projectName: "required"
},
messages: {
projectName: "Please give your project a name",
}
});
});
編集:このような1つの要素を検証しようとしました。
jQuery('.project-details .reg-next-button').click(function() {
// jQuery(".project-details").slideUp();
// jQuery('.project-funding').slideDown();
var validator = jQuery( ".wpcf7-form" ).validate();
validator.element( ".reg-project-name" );
});
編集: [次へ]ボタンをクリックした場合、次に進む前に、そのdivでフォーム要素を検証する必要がありますが、これは発生していません。つまり、フォーム要素は検証されていません。
何かご意見は?どうもありがとう。
まず、.validate()
クリックハンドラーの内部をラップすることを忘れてください...それはそのようには機能しません。1つの問題は.validate()
、フォームの有効性を「テスト」する方法ではないということです。むしろ、フォーム上でプラグイン.validate()
を初期化するための唯一の方法です。以降の呼び出しはすべて無視されるため、ページの読み込み時に1回実行します.validate()
。
jQuery Validateプラグインを使用して.valid()
プログラムでフォームをテストするには、テストをトリガーしてブール値を返すメソッドを使用します。
マルチステップフォームを作成するときは、<form>
セクションごとに一意のタグのセットを使用します。
次に.valid()
、次のセクションに移動する前に、セクションをテストするために使用します。(最初にプラグインを初期化することを忘れないでください.validate()
。DOM対応のすべてのフォームでを呼び出します。)
次に、最後のセクションで、.serialize()
各フォームで使用し、送信するデータクエリ文字列にそれらを連結します。
このようなもの...
$(document).ready(function() {
$('#form1').validate({
// rules
});
$('#form2').validate({
// rules
});
$('#form3').validate({
// rules,
submitHandler: function (form) {
// serialize and join data for all forms
// ajax submit
return false;
}
});
$('#gotoStep2').on('click', function() {
if ($('#form1').valid()) {
// code to reveal step 2
}
});
$('#gotoStep3').on('click', function() {
if ($('#form2').valid()) {
// code to reveal step 3
}
});
// there is no third click handler since the plugin takes care of this with the
// built-in submitHandler callback function on the last form.
});
click
上記のハンドラーはtype="submit"
ボタンを使用していないことを覚えておくことが重要です。これらは、タグまたはの外側にある通常のボタンです。form
type="button"
最後のフォームのボタンだけが通常のtype="submit"
ボタンです。これは、プラグインの組み込みのsubmitHandler
コールバック関数を最後のフォームでのみ利用しているためです。
「概念実証」デモ:http://jsfiddle.net/N9UpD/
また、参照用に参照してください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加