私はこの問題を2日間以上苦労しています。jQuery検証：フォーム検証で次のパネルを切り替えることができません
私はWooCommerceのチェックアウトのためのブートストラップアコーディオンを実装しようとしています。アコーデオンの本質的な振る舞いをうまく機能させることができました。しかし、私は顧客に洗練された経験を提供したいので、私はこのチェックアウトフォームを可能な限りファンシーに（そして同時にユーザーフレンドリーに）しようとしています。最初は、jQueryを使用して、フォーム提出なしにページを出た後に各フィールドの値がlocalstorageによって保持されるようにしなければなりませんでした。
次に、パネル2とパネル3を無効にしました。そのアイデアは、それぞれを徐々に顧客に提供することでした。ここでjsfiddleを見ることができます：https://jsfiddle.net/9vjcoLxh/6/
また、フォームにjQuery検証を追加しました。補足として、「ログイン/登録」パネルは、ログアウトした場合にのみ表示されます。ユーザーがログインしている場合は表示されません。ユーザーがログインしている場合は、次のパネルが自動的に切り替わり、チェックアウトの流れが改善されます。私は実際の顧客情報（姓と名字、電子メールアドレスなど）が含まれているので、2番目のパネルのみを検証したかったのです。検証は、ボタンのクリックで開始し、ここに私のスニペットだことになります。
jQuery('#toggle-delivery').click(function() {
jQuery("#validate-info").validate({
rules: {
phone_number: {
required: true,
digits: true,
minlength: 9
},
email_address: {
required: true,
email: true
},
shipping_first_name: {
required: true,
minlength: 2
},
shipping_last_name: {
required: true,
minlength: 2
}
},
onfocusout: function(e) {
this.element(e);
},
messages: {
phone_number: {
required: "Please enter a valid UK phone number",
digits: "Please enter a valid UK phone number.",
minlength: "Please enter at least 9 characters"
},
email_address: {
required: "We need your email address to contact you.",
email: "Oops! This isn't a correct email format. Please check and try again."
},
shipping_first_name: {
minlength: "Please enter at least 2 characters."
},
shipping_last_name: {
minlength: "Please enter at least 2 characters."
},
shipping_address_1: {
required: "Please enter a valid UK address.",
minlength: "Please enter a valid UK address."
}
}
}).form();
});
これがうまく機能しています。しかし、私はさらに一歩行って、崩壊し、フォームがこのスニペットを追加することで有効ではありませんでした場合は拡大してから次の1からのデータとパネルを防ぐ：繰り返しますが、それは非常によく働いていた
jQuery('#toggle-delivery').click(function(e){
e.preventDefault();
var sectionValid = true;
var collapse = jQuery(this).closest('.panel-collapse.collapse');
jQuery.each(collapse.find('input, select, textarea'), function(){
if(!jQuery(this).valid()){
sectionValid = false;
}
});
if(sectionValid){
collapse.collapse('toggle');
collapse.parents('.panel').next().find('.panel-collapse.collapse').collapse('toggle');
}
});
。しかし、私はすべてがうまくいくことに気付きました。ユーザーがログインしていない場合、フォームはクリックで検証されますが、アクティブパネルは折りたたまれておらず、次のパネルは切り替えられません。それは最後のスニペットが機能していないかのようです。ユーザーがログインしていれば完璧に動作するので、これは非常に奇妙です。私はjQuery/JSに精通しておらず、WooCommerceのエキスパートでもありません。問題が何であるかを知ることはできません。私は多くのソリューションを試しましたが、役に立たないものです。スクリプトのデバッグを有効にしましたが、何も表示されません。 JSコンソールにもエラーはありません。 ChromeとFirefoxで同じ結果を試してみました。
可能性のある問題については、私は本当に感謝しています。