如何明智地验证表单选项卡，在多个选项卡中编写？

Question

我已经将表单划分为3个选项卡，当我单击next按钮时，它会移动到next选项卡，最后在最后一个选项卡中，当单击submit时，整个表单将得到验证，这也是正确的，但我的问题是，当我单击next时，它必须移动到next选项卡，当当前选项卡验证为真时，它必须移动到next选项卡。

这是我的表格

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>

    <form name="registration_form" id="registration_form" action="save.php" method="post">
   <div id="tabs">
    <ul>
    <li><a href="#tabs-1">Basic Details</a></li>
    <li><a href="#tabs-2">Employee Details</a></li>
    <li><a href="#tabs-3">Address</a></li>
    </ul>
   <div id="tabs-1">
      <div class="field">   
        <label>First Name</label>
          <input type="text" name="first_name" id="first_name" />          
        <label>Last Name</label>
          <input type="text" name="last_name" id="last_name" />
       </div>
       <div class="field">  
         <label>Age</label>
           <input type="text" name="age" id="age"/>
       </div>
       <div class="field">   
           <input value="Next" type="button" id="next-1" name="1"/> 
       </div>
   </div>
   <div id="tabs-2">
     <div class="field">   
       <label>Company</label>
         <input type="text" name="company" id="company">
     </div>
     <div class="field">   
       <label>Designation</label>
          <select name="designation" >
            <option value="software developer">software developer</option>
            <option value="software analyst">software analyst</option>
            <option value="tester">tester</option>
           </select>
     </div>
     <div class="field">   
      <label>Annual income</label>
        <input type="text" name="income" id="income"> in Rupees
    </div>
    <div class="field">   
       <input value="Next" type="button" id="next-2" name="2" /> 
    </div>
  </div>
  <div id="tabs-3">
     <div class="field">   
       <label>Address</label>
         <input type="text" name="address" id="address" 
     </div>
    <div class="field">   
       <input type="submit" name="submit" value="SUBMIT" id="reg_submit" />
    </div>
  </div>
 </div>
 </form>

Javascript验证代码是

    <script type="text/javascript">
     $( "#tabs" ).tabs();
    var validator = $("#registration_form").validate({ rules: {
                first_name: {
                    required: true,
                    maxlength:30,
                },
                last_name: {
                    required: true,
                    maxlength:30,
                },
                age: {
                    digits:true,
                },
                company: {
                    required: true,
                },
                designation: {
                    required: true,
                },
                income: {
                    digits:true,
                },
                address: {
                    maxlength:100,
                },
                },
            messages: {
                first_name: {
                    required: "Please enter First Name",
                    maxlength: "maximum 30 characters are allowed",
                },
                last_name: {
                    required: "Please enter Last Name",
                    maxlength: "maximum 30 characters are allowed",
                },  
                age: {
                    digits: "Enter only digits",
                },
                Company: {
                    required: "Please enter Company",
                },
                designation: {
                    required: "Please Select Designation",
                },
                income: {
                    digits: "Enter only digits",
                },
                address: {
                    maxlength: "Maximum of 100 characters are allowed",
                 },
                 }
                });

//我在堆栈溢出中看到了一些示例，并尝试了如下所示，但它不起作用

        var tabs = $("#tabs").tabs();
       $('[id^=next-]').click(function() {
       var tabid = $(this).attr('name');
       var valid = true;
       var i = 0;
       var $inputs = $(this).children("div").find("input");

       $inputs.each(function() {
       if (!validator.element(this) && valid) {
        validator.focusInvalid();
        valid = false;
       }
       });

       if (valid) {
       var tabId = $(this).attr('name');
       $( "#tabs" ).tabs( "option", "active", tabId );
       }
       });

       $("input[id=reg_submit]").click(function() {
       $(this).parents("form").submit();
       });

请帮帮忙，

谢谢

Answer 1

var next1 = false;
var next2 = false;
var next3 = false;

$('#next-1').on('click', function(){
     //validate your inputs fields

     var next1 = true;// assign true if validation is correct.
});

$('#next-2').on('click', function(){
//validate your inputs fields

     var next2 = true;// assign true if validation is correct
});

$('#next-3').on('click', function(){
//validate your inputs fields

        var next3 = true;// assign true if validation is correct

                if((next1 == 'true') && (next2 == 'true') && (next3 == 'true'))

                        {
                                 //submit form
                        }

})

试试这个例子

或者做三种形式，