我有一个包含 2 个步骤的表单。我想做的是在继续下一步之前验证每一步;用户应该无法进入第 1 步的第 2 步字段无效。
js fiddle :http://jsfiddle.net/Egyhc/ 强>
您可以在下面找到表格的简化版本:
<form>
<div id="step1" style="display: block;">
<label for="first_name">First Name</label>
<input type="text" value="" name="first_name" id="FirstName"/>
<label for="last_name">Last Name</label>
<input type="text" value="" name="last_name" id="LastName"/>
</div>
<div id="step2" style="display: none;">
<label for="first_name">Address</label>
<input type="text" value="" name="address" id="Address"/>
</div>
<a href="#" id="step1_btn">Continue to step 2</a>
<input type="submit" id="submit_btn" value="Verstuur" style="display: none;" />
</form>
$(function() {
$('#step1_btn').click(function() {
$('#step1').hide();
$('#step2, #submit_btn').show();
});
});
你们建议我如何实现这一目标?
最佳答案
jQuery validate 有一个非常巧妙的设置,可以让您忽略对隐藏字段的验证。因此,您可以处理步骤的显示/隐藏逻辑,为了进行验证,您可以这样做:
这表明:ignore hidden
$("form").validate({
ignore: ":hidden"
});
如果您需要检查默认表单提交之外的其他内容的验证,您可以使用 valid
像这样的方法:$("form").valid()
.
我注意到您的表单上没有任何验证类,所以我假设您正在其他地方处理它。以防万一,您可以通过这样的 css 类告诉 jQuery 验证您的规则:<input type="text" class="required digits"/>
在这里查看更多信息:http://bassistance.de/2008/01/30/jquery-validation-plugin-overview/
关于javascript - jQuery:提交前验证字段(多步表单),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11052711/