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

我认为如果你改变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"
        }       
    });
});

});

jquery验证可折叠扩展下一条错误消息

2 个答案: