Javascript jQuery:提交前验证字段（多步骤表单）

我有一个由两个步骤组成的表单。我想做的是在继续下一步之前验证每一步；用户应无法进入第1步的第2步。第1步的字段无效

js小提琴：
您可以在下面找到该表格的简化版本：

---

你们建议我如何实现这一点？

jQuery validate有一个非常简洁的设置，允许您忽略隐藏字段的验证。因此，您可以处理步骤的显示/隐藏逻辑，对于验证，您可以执行以下操作：

这表明：

如果您需要检查默认表单提交之外的内容的有效性，您可以使用如下

valid

方法：

$（“表单”）.valid（）

我注意到您的表单上没有任何验证类，所以我假设您正在其他地方处理。以防万一，您可以告诉jQuery通过如下css类验证您的规则：

---

更多信息请参见此处：

谢谢您的回复！但是，当按下submit按钮时，这段代码不是在验证字段吗？我需要在按下“继续执行步骤2”按钮时验证字段，以防止用户继续使用无效字段。在单击事件中，您只需检查

if（$（'form'）.valid（））

。顺便说一句，你应该给你的表格一个id或者其他东西，这样你就可以更直接地参考它。谢谢！这是有道理的。顺便说一句，这可能是一个愚蠢的问题，但这个jquery验证是否默认实现到jquery中？或者我需要下载一个单独的插件吗？它是一个单独的插件，在我链接的页面上。它被称为jQuery.validate

<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();        
  });
});​

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