jQuery:在提交之前验证字段(多步骤表单）

jQuery: Validating fields before submitting (multistep form)

本文关键字：表单 字段 验证 提交 jQuery      更新时间：2023-09-26

我有一个由 2 个步骤组成的表单。我想做的是在继续下一步之前验证每个步骤;用户不应能够访问步骤 1 的字段无效的步骤 2。

JS小提琴：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 验证有一个非常简洁的设置，可以让你忽略对隐藏字段的验证。 因此，您可以处理步骤的显示/隐藏逻辑，并且为了验证，您可以这样做：

正如这所暗示的：忽略隐藏

$("form").validate({
   ignore: ":hidden"
});

如果您需要检查默认表单提交以外的内容的验证，您可以使用如下valid方法：$("form").valid() 。

我注意到您的表单上没有任何验证类，所以我假设您在其他地方处理它。 以防万一你不是，你可以告诉jQuery通过css类验证你的规则，如下所示： <input type="text" class="required digits"/>

在此处查看更多信息： http://bassistance.de/2008/01/30/jquery-validation-plugin-overview/

相关文章：