ページの読み込み時に最初の div が展開されるように設定されている 6 つの折りたたみ可能な div を持つフォームがあります。フォームが送信されると、検証が行われます。検証ラベル エラー クラスを取得するフィールドがある場所で、折りたたまれた div を展開できますか。ユーザーは必須フィールドを確認できますか? エラークラスを含むcloses divを展開するjQueryに問題があります。または、これを行うためのより良い方法があるかもしれません
以下は HTML の抜粋です。
<form action="" method="post" id="mastercardForm">
<label style="font-size:1em;"><span class="astrix">*</span> Indicates required.</label>
<div data-role="collapsible-set">
<div name="accordion" data-role="collapsible" data-collapsed="false">
<h3 style="z-index:0;">MASTERCARD<sup>®</sup> APPLICATION</h3>
<div>You must select <strong>Individual Credit below if:</strong></div><br /><br />
You must select <B>Joint Credit</B> below if:<br />
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label>Type of Account: <span class="astrix">*</span></label>
<input type="radio" name="rad_Type_of_Account" id="rad_Individual" class="required" value="Individual" />
<label for="rad_Individual">Individual</label>
<input type="radio" name="rad_Type_of_Account" id="rad_Joint" value="Joint"/>
<label for="rad_Joint">Joint</label>
</fieldset>
</div>
<div id="myInitials" style='display:none'>
<label for="ApplicantInitial" >If applying for joint credit: Applicant please initial <span class="astrix">*</span></label>
<div style="min-width:5.25em;max-width:5.25em;"><input type="text" id="ApplicantInitial" name="ApplicantInitial" size="1" maxlength="2" value="" /></div>
<label for="JointInitial">Joint/Co-applicant please initial <span class="astrix">*</span></label>
<div style="min-width:5.25em;max-width:5.25em;"><input type="text" id="JointInitial" name="JointInitial" size="1" maxlength="2" value="" /></div>
</div>
</div>
<div name="accordion" data-role="collapsible">
<h3 style="z-index:0;">MASTERCARD<sup>®</sup> DISCLOSURE</h3>
<div id="MastercardTerms">
<div>
<div id="header">Interest Rates and Interest Charges</div>
</div>
<div>How we will calculate your balance: We use a method called "average daily balance (including new purchases)"
Loss of Introductory APR: We may end your Introductory APR and apply the non-introductory rate if you make a late payment.<br/>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label>Disclosure Agreement: <span class="astrix">*</span></label>
<label for="rad_Accept1">Accept</label>
<input id="rad_Accept1" type="radio" name="rad_Accept" value="Accept" class="required"/>
<label for="rad_Decline1">Decline</label>
<input type="radio" id="rad_Decline1" name="rad_Accept" value="Decline"/>
</fieldset>
</div>
</div>
ここにjqueryがあります：
$(document).ready(function () {
$('#mastercardForm').validate({
invalidHandler: function(form, validator) {
if (validator.numberOfInvalids() > 0) {
validator.showErrors();
var myindex = $('label.error').closest('div.ui-collapsible').index('div.ui-collapsible-content');
alert(myindex);
$('div[name=accordion]').trigger('expand', myindex);
alert(validator.numberOfInvalids());
}
},
ignore: "",
rules: {
'rad_Type_of_Account': { required: true },
ApplicantInitial: {
required: {
depends: function () {
return $('input[name=rad_Type_of_Account]:checked').val() == 'Joint';
}
}
},
JointInitial: {
required: {
depends: function () {
return $('input[name=rad_Type_of_Account]:checked').val() == 'Joint';
}
}
},
'rad_Accept': { required: true },
name: "App_FName", // simple rule, converted to {required:true}
name: "App_LName"
}
});
});