Javascript 表单验证不适用于多步骤表单

我需要制作一个带有验证的多步骤表单。多步骤按钮工作正常，我可以提交表单，但表单没有得到验证。它只验证多步骤表单中的最后一页，但我希望在每次按下“下一步”按钮之前验证字段

Html代码：

<form name="basicform" id="basicform" method="post" 
action="yourpage.html">

<!-- id will be unique, but class name will be same -->
<div id="sf1" class="frm">
<fieldset>
        <legend>Step 1 of 3</legend>

        <div class="form-group">
          <label class="col-lg-2 control-label" for="uname">Your Name: 
 </label>
          <div class="col-lg-6">
            <input type="text" placeholder="Your Name" id="uname" 
 name="uname" class="form-control" autocomplete="off">
          </div>
        </div>

        <div class="form-group">
          <div class="col-lg-10 col-lg-offset-2">
            <!-- open1 is given in the class that is binded with the 
 click event -->
            <button class="btn btn-primary open1" type="button">Next 
 <span class="fa fa-arrow-right"></span></button> 
          </div>
        </div>

</fieldset>
</div>

<!-- id will be unique, but class name will be same -->
<div id="sf2" class="frm">
<fieldset>
        <legend>Step 2 of 3</legend>

        <div class="form-group">
          <label class="col-lg-2 control-label" for="uemail">Your 
 Email: </label>
          <div class="col-lg-6">
            <input type="text" placeholder="Your Email" id="uemail" 
 name="uemail" class="form-control" autocomplete="off">
          </div>
        </div>

        <div class="clearfix" style="height: 10px;clear: both;"></div>

        <div class="form-group">
          <div class="col-lg-10 col-lg-offset-2">
            <!-- back2 unique class name  -->
            <button class="btn btn-warning back2" type="button"><span 
class="fa fa-arrow-left"></span> Back</button> 
            <!-- open2 unique class name -->
            <button class="btn btn-primary open2" type="button">Next 
<span class="fa fa-arrow-right"></span></button> 
          </div>
        </div>
</fieldset>
</div>

<!-- id will be unique, but class name will be same -->
<div id="sf3" class="frm">
<fieldset>
        <legend>Step 3 of 3</legend>

        <div class="form-group">
          <label class="col-lg-2 control-label" for="upass1">Password: 
 </label>
          <div class="col-lg-6">
            <input type="password" placeholder="Your Password" 
 id="upass1" name="upass1" class="form-control" autocomplete="off">
          </div>
        </div>

        <div class="form-group">
          <label class="col-lg-2 control-label" for="upass1">Confirm 
 Password: </label>
          <div class="col-lg-6">
            <input type="password" placeholder="Confirm Password" 
 id="upass2" name="upass2" class="form-control" autocomplete="off">
          </div>
        </div>

        <div class="form-group">
          <div class="col-lg-10 col-lg-offset-2">
            <!-- Unique class name -->
            <button class="btn btn-warning back3" type="button"><span 
class="fa fa-arrow-left"></span> Back</button> 
            <!-- Unique class name -->
            <button class="btn btn-primary open3" type="button">Submit 
</button> 
            <img src="spinner.gif" alt="" id="loader" style="display: 
none">
          </div>
        </div>
</fieldset>
</div>

</form>

第1步，共3步
你的名字：
下一个
第2步，共3步
你的
电邮：
返回
下一个
第3步，共3步
密码：
证实
密码：
返回
提交

JavaScript/Jquery代码：

//validation
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
jQuery().ready(function() {

var v = jQuery("#basicform").validate({
  rules: {
    uname: {
      required: true,
      minlength: 2,
      maxlength: 16
    },
    uemail: {
      required: true,
      minlength: 2,
      email: true,
      maxlength: 100,
    },
    upass1: {
      required: true,
      minlength: 6,
        maxlength: 15,
    },
    upass2: {
      required: true,
      minlength: 6,
      equalTo: "#upass1",
    }

  },
  errorElement: "span",
  errorClass: "help-inline",
});

});

//navigation
jQuery().ready(function() {

// Binding next button on first step
$(".open1").click(function() {
  if (v.form()) {
    $(".frm").hide("fast");
    $("#sf2").show("slow");
  }
});

// Binding next button on second step
$(".open2").click(function() {
  if (v.form()) {
    $(".frm").hide("fast");
    $("#sf3").show("slow");
  }
});

 // Binding back button on second step
$(".back2").click(function() {
  $(".frm").hide("fast");
  $("#sf1").show("slow");
});

 // Binding back button on third step
 $(".back3").click(function() {
  $(".frm").hide("fast");
  $("#sf2").show("slow");
});

$(".open3").click(function() {
  if (v.form()) {
    // optional
    // used delay form submission for a seccond and show a loader 
image
    $("#loader").show();
     setTimeout(function(){
       $("#basicform").html('<h2>Thanks for your time.</h2>');
     }, 1000);
    // Remove this if you are not using ajax method for submitting 
values
    return false;
  }
});
});
</script>

//验证
jQuery（）.ready（函数（））{
var v=jQuery（“#基本表单”）.validate({
规则：{
联塞特派团：{
要求：正确，
最小长度：2，
最大长度：16
},
电子邮件：{
要求：正确，
最小长度：2，
电子邮件：是的，
最大长度：100，
},
upass1：{
要求：正确，
最小长度：6，
最大长度：15，
},
upass2：{
要求：正确，
最小长度：6，
equalTo:“#upass1”，
}
},
错误元素：“span”，
errorClass:“帮助内联”，
});
});
//航行
jQuery（）.ready（函数（））{
//第一步绑定下一步按钮
$（“.open1”）。单击（函数（）{
if（v.form（））{
$（“.frm”）.hide（“fast”）；
$（#sf2”）。显示（“慢”）；
}
});
//第二步绑定下一步按钮
$（“.open2”）。单击（函数（）{
if（v.form（））{
$（“.frm”）.hide（“fast”）；
$（#sf3”）。显示（“慢”）；
}
});
//第二步上的绑定返回按钮
$（“.back2”）。单击（函数（）{
$（“.frm”）.hide（“fast”）；
$（#sf1”）。显示（“慢”）；
});
//第三步上的绑定返回按钮
$（“.back3”）。单击（函数（）{
$（“.frm”）.hide（“fast”）；
$（#sf2”）。显示（“慢”）；
});
$（“.open3”）。单击（函数（）{
if（v.form（））{
//可选的
//使用延迟表单提交一秒并显示加载程序
形象
$（“#加载程序”）.show（）；
setTimeout（函数（）{
$（“#basicform”）.html（'谢谢您的时间'）；
}, 1000);
//如果不使用ajax方法进行提交，请删除此选项
价值观
返回false；
}
});
});

您正在一个单独的jQuery（）ready块中声明表单“v”，因此第二个jQuery（）ready块不会检测到“v”。将它们合并到一个块中，如下所示：

$（文档）.ready（函数（）{
变量v=$（“#格式1”）。验证({
规则：{
fname：{
要求：正确，
最小长度：2，
最大长度：16
},
名称：{
要求：正确，
最小长度：2，
电子邮件：是的，
最大长度：100，
},
prnum：{
要求：正确，
最小长度：6，
最大长度：15，
},
年龄：{
要求：正确，
最小长度：6，
}
},
错误元素：“span”，
errorClass:“帮助内联”，
});
//第一步绑定下一步按钮
$（“.frm”）.hide（“fast”）；
$（#sf1”）。显示（“慢”）；
$（“.open1”）。单击（函数（）{
if（v.form（））{
$（“.frm”）.hide（“fast”）；
$（#sf2”）。显示（“慢”）；
}
});
//第二步绑定下一步按钮
$（“.open2”）。单击（函数（）{
if（v.form（））{
$（“.frm”）.hide（“fast”）；
$（#sf3”）。显示（“慢”）；
}
});
$（“.open3”）。单击（函数（）{
$（“.frm”）.hide（“fast”）；
$（#sf4”）。显示（“慢”）；
});
//第二步上的绑定返回按钮
$（“.back2”）。单击（函数（）{
$（“.frm”）.hide（“fast”）；
$（#sf1”）。显示（“慢”）；
});
//第三步上的绑定返回按钮
$（“.back3”）。单击（函数（）{
$（“.frm”）.hide（“fast”）；
$（#sf2”）。显示（“慢”）；
});
$（“.back4”）。单击（函数（）{
$（“.frm”）.hide（“fast”）；
$（#sf3”）。显示（“慢”）；
});
});

新医生注册


第1步，共4步

医生证*

加入日期*

注册号*

就业类型*

选择就业类型
永久的
暂时的
参观
优先班*

选择班次
早晨
下午
傍晚
夜
系*

选择部门
心脏病学
重症监护
普通外科
名称*

选择名称
牙科医生
心理学博士
下一个
第2步，共4步

个人资料


名字*

中间名

姓*

日期o