jquery - FormToWizard jQuery 插件 "Next"按钮重置表单

Question

我使用 jQuery 插件 formToWizard 构建了一个相当冗长的表单。表单中途的其中一个字段集具有隐藏字段，这些字段在单击按钮时显示。奇怪的是，除非显示这些字段，否则下一步按钮将使用户返回到空字段的开头。例如，如果我去掉 CSS，它就可以正常工作。

奇怪的是之前的fieldset在结构上完全一致，没有问题。有人遇到/知道解决这个问题的方法吗？

这是我的相关代码。

HTML

<fieldset>
            <legend>Part 3 Sworn declaration</legend>
                <ul><li class="">
                    <p>I/We desire to obtain a grant of:</p>
                    <label>Probate of the deceased's will<input type="radio" name="j1" value="1"></label>
                    <label>Administration with will annexed of the deceased's estate<input type="radio" name="j1" value="2"></label>
                    <label>Administration intestate of the deceased's estate<input type="radio" name="j1" value="3"></label>
                    <label>Nominal Grant (State Reason for same)<input type="radio" name="j1" value="4"></label>
                    <input type="text" maxlength="33" class="input_text_num_let" placeholder="" name="b12c96nmNominalGrantReason"></li>
                </ul>

                <ol id="first_sworn">
                    <hr/>
                    <li class="col-2">
                        <input class="input_text_num_let" placeholder="Forename of 1st Applicant" type="text" maxlength="33" name="b12c96nfSwornApplicant1Forename">
                        <input class="input_text_num_let" placeholder="Surname of 1st Applicant" type="text" maxlength="33" name="b12c96nfSwornApplicant1Surname">
                    </li>
                    <li class="col-1">At<input class="input_text_num_let" placeholder="Location" type="text" maxlength="33" name="b12c96nmApplicant1SwornAt"></li>
                    <li><input type="checkbox" name="K1" value="1"></li>
                    <li class="col-1"><input type="text" maxlength="" name="b12c96nmApplicant1IdentifiedToMeBy"></li>
                    <li><input type="checkbox" name="L1" value="1"></li>
                    <li><input type="checkbox" name="M1" value="1"></li>
                    <li class="col-2">
                        <input class="input_text_num_let" type="text" placeholder="Document Type"  maxlength="" name="b12c96nmApplicant1IDDocumentType">
                        <input class="input_text_num_let" type="text" placeholder="Issue Number"  maxlength="" name="b12c96nmApplicant1IDIssueNumber">
                    </li>
                    <label><button class="add-button" type="button" onclick="addSwornTwo()">+</button>Add Applicant</label>
                </ol>

                <ol id="second_sworn">
                    <hr/>
                    <li class="col-2">
                        <input class="input_text_num_let" placeholder="Forename of 2nd Applicant"  type="text" maxlength="33" name="b12c96nfSwornApplicant2Forename">
                        <input class="input_text_num_let" placeholder="Surname of 2nd Applicant" type="text" maxlength="33" name="b12c96nfSwornApplicant2Surname">
                    </li>
                    <li class="col-1">At<input class="input_text_num_let" placeholder="Location" type="text" maxlength="33" name="b12c96nmApplicant2SwornAt"></li>
                    <li><input type="checkbox" name="M1" value="1"></li>
                    <li class="col-1"><input type="text" maxlength="" name="b12c96nmApplicant2IdentifiedToMeBy"></li>
                    <li><input type="checkbox" name="O1" value="1"></li>
                    <li><input type="checkbox" name="P1" value="1"></li>
                    <li class="col-2">
                        <input class="input_text_num_let" placeholder="Document Type" type="text" maxlength="" name="b12c96nmApplicant2IDDocumentType">
                        <input class="input_text_num_let" placeholder="Issue Number" type="text" maxlength="" name="b12c96nmApplicant2IDIssueNumber">
                    </li>
                    <label><button class="add-button" type="button" onclick="addSwornThree()">+</button>Add Applicant</label>
                </ol>


                <ol id="third_sworn">
                    <hr/>
                    <li class="col-2">
                        <input class="input_text_num_let" placeholder="Forename of 3rd Applicant" type="text" maxlength="33" name="b12c96nfSwornApplicant3Forename">
                        <input class="input_text_num_let" placeholder="Surname of 3rd Applicant" type="text" maxlength="33" name="b12c96nfSwornApplicant3Surname">
                    </li>
                    <li class="col-1">At<input placeholder="Location" type="text" maxlength="33" name="b12c96nmApplicant3SwornAt"></li>
                    <li><input type="checkbox" name="Q1" value="1"></li>
                    <li class="col-1"><input class="input_text_num_let" type="text" maxlength="" name="b12c96nmApplicant3IdentifiedToMeBy"></li>
                    <li><input type="checkbox" name="R1" value="1"></li>
                    <li><input type="checkbox" name="S1" value="1"></li>
                    <li class="col-2">
                        <input class="input_text_num_let" placeholder="Document Type" type="text" maxlength="" name="b12c96nmApplicant3IDDocumentType">
                        <input class="input_text_num_let" placeholder="Issue Number" type="text" maxlength="" name="b12c96nmApplicant3IDIssueNumber">
                    </li>
                    <label><button class="add-button" type="button" onclick="addSwornFour()">+</button>Add Applicant</label> 
                </ol>



                <ol id="fourth_sworn">
                    <hr/>
                    <li class="col-2">
                        <input class="input_text_num_let" placeholder="Forename of 4th Applicant" type="text" maxlength="33" name="b12c96nfSwornApplicant4Forename">
                        <input class="input_text_num_let" placeholder="Surname of 4th Applicant" type="text" maxlength="33" name="b12c96nfSwornApplicant4Surname">
                    </li>
                    <li class="col-1">At<input class="input_text_num_let" placeholder="Location" type="text" maxlength="33" name="b12c96nmApplicant4SwornAt"></li>
                    <li><input type="checkbox" name="T1" value="1"></li>
                    <li class="col-1"><input class="input_text_num_let" type="text" maxlength="" name="b12c96nmApplicant4IdentifiedToMeBy"></li>
                    <li><input type="checkbox" name="U1" value="1"></li>
                    <li><input type="checkbox" name="V1" value="1"></li>
                    <li class="col-2">
                        <input class="input_text_num_let" placeholder="Document Type" type="text" maxlength="" name="b12c96nmApplicant4IDDocumentType">
                        <input class="input_text_num_let" placeholder="Issue Number" type="text" maxlength="" name="b12c96nmApplicant4IDIssueNumber">
                    </li>
                </ol>


        </fieldset>

jQuery 显示函数

function addSwornTwo() {
    $('#second_sworn').show("fast");
}
function addSwornThree() {
    $('#third_sworn').show("fast");
}
function addSwornFour() {
    $('#fourth_sworn').show("fast");
}

CSS

#second_sworn {
    display: none;
}
#third_sworn {
    display: none;
}
#fourth_sworn {
    display: none;
}

验证函数

 $( function() {
            var $signupForm = $( '#eProbateForm' );

            $signupForm.validate({
                errorElement: 'em',
                submitHandler: function (form) { 
                    alert('submitted');
                    form.submit();
                }
            });

            $signupForm.formToWizard({
                submitButton: 'submitForm',
                nextBtnClass: 'btn btn-primary next',
                prevBtnClass: 'btn btn-default prev',
                buttonTag:    'button',
                validateBeforeNext: function(form, step) {
                    var stepIsValid = true;
                    var validator = form.validate();
                    $(':input', step).each( function(index) {
                        var xy = validator.element(this);
                        stepIsValid = stepIsValid && (typeof xy == 'undefined' || xy);
                    });
                    return stepIsValid;
                },
                progress: function (i, count) {
                    $('#progress-complete').width(''+(i/count*100)+'%');
                }
            });
        });

任何朝着正确方向的插入都会非常有帮助

编辑:好的所以更新，罪魁祸首似乎是复选框。我收到错误消息“无法读取未定义的属性‘名称’”。为什么验证器不能忽略隐藏字段？我没有将它们设置为必需或任何东西。有解决办法吗？

Answer 1

我想通了!对于有类似问题的任何人，我认为验证器正在寻找不存在的东西，因此您必须告诉它忽略“隐藏”元素。对于复选框，将 ignore: :hidden:not(:checkbox) 添加到您的 $('example_form').validate(){} 函数