我使用jQuery插件formToWizard构建一个相当冗长的表单。其中一个关于表单中间的字段集具有隐藏的字段，单击按钮即可显示这些字段集。奇怪的是，除非显示这些字段，否则下一个按钮会将用户返回到空字段的开头。例如，如果我摆脱CSS它工作正常。
这个陌生人的原因是前一个字段集在结构上是相同的并且没有问题。有人遇到/知道修复此问题吗？
见下我的相关代码。
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 show fucntions
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)+'%');
}
});
});
任何正确方向的推动都会非常有帮助
编辑：好的，所以更新，罪魁祸首似乎是复选框。我收到错误消息“无法读取未定义的属性'名称'”。为什么验证器不能忽略隐藏的字段？我没有将它们设置为必需或任何东西。有解决方法吗？
答案 0 :(得分：1)
我明白了！对于有类似问题的人，我认为验证人正在寻找不存在的东西，所以你必须告诉它忽略＆＃34;隐藏＆＃34;元素。如果选中此复选框，请向您的:hidden:not(:checkbox)功能
$('example_form').validate(){}