JQuery проверить свернуть развернуть на следующее сообщение об ошибке

Question

У меня есть форма, которая имеет шесть разборных div, первый div которых установлен для расширения при загрузке страницы. Когда форма отправлена, происходит проверка. Можно ли развернуть свернутый div, где есть поля, которые получают класс ошибки метки валидации. Таким образом, пользователь может видеть обязательные поля? У меня есть проблема с jQuery, чтобы расширить закрывающий div, который содержит класс ошибки. Или, может быть, есть лучший способ сделать это

Вот урезанный 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>&#174;</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>&#174;</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"
        }

    });
});

Answer 1

Вот мой последний JQuery просто нужно, чтобы расширить div, в котором указана ошибка.

<script type="text/javascript">

 $(document).ready(function () {
    $('#mastercardForm').validate({
        invalidHandler: function(form, validator) {
            if (validator.numberOfInvalids() > 0) {
                validator.showErrors();
    if ($('label.error').css('display') != 'none')
    {
var myindex = $('label.error').closest('div.ui-collapsible').index('.myDiv');
alert(myindex);
$('.myDiv').trigger('expand', myindex);
alert(validator.numberOfInvalids());
}
            }
        },

       ignore: "hidden",
        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"
        }       
    });
});

});  

Answer 2

Я думаю, что если вы измените ignore: "hidden", Ваша проблема будет решена.