jquery validate collapsible expand on next error message

Question

У меня есть форма с шестью разборными divs, первый 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

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

Answer 2

Вот мой последний 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" 
     }  
    }); 
}); 

});