jquery validate collapsible expand on next error message

Question

I have a form that has six collapsible divs the first div is set to expand when the page loads. When the form is submitted the validation takes place. Can I make the collapsed div expand where there are fields that get the validation label error class. So the user can see the required fields? I'm have the problem with the jQuery to expand the closes div that contains the error class. Or maybe there is a better way to do this

Here is the cut down 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>

Here is the 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"
        }

    });
});

can you try bootstrap collapse – Arun Chandran Chackachattil Jul 03 '13 at 18:02 — Arun Chandran Chackachattil, Jul 03 '13 at 18:02

score 0 · Answer 1 · answered Jul 06 '13 at 07:48

0

I think if you change ignore: "hidden", your problem would be solved.

answered Jul 06 '13 at 07:48

Pedram

728
3
10
29

My variable myIndex returns -1 which I think means I'm not traversing through the divs properly. – rsvore Jul 08 '13 at 12:54
I changed ignore to hidden and can see I'm getign the right index to where the error is in the div but I can't get the dic to expand. I've updated the jQuery and add a class to the collapsible divs called myDiv just to reference them. – rsvore Jul 08 '13 at 16:31

score 0 · Answer 2 · answered Jul 08 '13 at 16:37

Here is my latest jquery just need it to expand the div that has the error indexed.

<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"
        }       
    });
});

});

This line: $('.myDiv').trigger('expand', myindex); seems to expand the last div. — rsvore, Jul 08 '13 at 19:03

jquery validate collapsible expand on next error message

2 Answers2