1

这是我的表格。我把它分成了3个div

    <div id="signup-form">
      <div id="row">
        <form id="signForm">
           <div id="first-form">        
                    <fieldset id="body">
                        <fieldset>
                            <label for="name">Name</label>
                            <input type="text" name="user_name" id="user_name" />
                        </fieldset>
                        <fieldset>
                            <label for="mobile">Mobile</label>
                            <input type="text" name="mobile" id="mobile" />
                        </fieldset>
                         <a class="next" id="next1" href="#"><span>Next</span></a> 
                    </fieldset>

    </div>
    <div id="second-form">
           <fieldset>
              <label for="email">Email</label>
                <input type="text" name="user_email" id="user_email" />
            </fieldset>
            <fieldset>
                 <label for="password">Password</label>
                 <input type="password" name="pass_word" id="pass_word" />
            </fieldset>
            <a class="next" id="next2" href="#"><span>Next</span></a> 
    </div>
    <div id="third-form">
                        <fieldset>
                            <label for="city">City</label>
                            <input type="text" name="user_city" id="user_city" />
                        </fieldset>
                        <fieldset>
                            <label for="college">College</label>
                            <input type="text" name="college" id="college" />
                        </fieldset>
                        <fieldset>
                            <label for="branch">Branch</label>
                            <input type="text" name="branch" id="branch" />
                        </fieldset>
                        <input type="submit" id="signup" value="Sign Up" />
                 </div>
            </form>
         </div>
    </div>

这些是我编写的代码的验证。我使用了validation.min.js 插件来验证表单

    var validator = $("#signForm").validate({
  rules: {
    user_name: "required", 
    user_email: {          
      required: true,
      email: true
    },
    mobile: {
      required: true,
      digits:true,
      maxlength:10,
      minlength:10
    },
    pass_word: {
      required: true
    },
    user_city: {
      required: true
    },
    college: {
      required: true
    },
    branch: {
      required: true
    }
  },
  messages: {
    user_name: "Please enter name.",
    user_email: {         
      required: "please enter email",
      email: "please enter valid email"
    },
    mobile: {         
      required: "please enter mobile number",
      email: "please enter valid mobile number",
      maxlength: "mobile number contains 10 digits",
      minlength: "max 10 digits allowed"
    },
    pass_word: "Please enter password.",
    user_city: "Please enter user city.",
    college: "Please enter college.",
    branch: "Please enter branch."
  },
  submitHandler: function(form) {
        form.submit();
    }
});

我正在尝试获取代码，其中最初只有 divfirst-form必须处于活动状态，其余两个 divsecond-form必须third-form处于非活动状态，当next在 div 中单击时，first-form它必须检查所有输入元素的验证以及所有first-form元素是否都是有效则只有第二个 div 即second-form必须处于活动状态。与 相同，在second-form所有输入元素second-form都有效之前，third-form必须是非活动的，并且只有当所有输入元素second-form都有效时才必须是活动的。

当我试图寻找解决方案时，我发现了http://jsfiddle.net/c2y6r/1/。但是在这个例子jquery UI tabs中，我不想使用标签。如何使用 div 而不是选项卡来做到这一点？

4

1 回答 1

0

你可以做类似的事情

jQuery(function($) {
  var validator = $("#signForm").validate({
    rules: {
      user_name: "required",
      user_email: {
        required: true,
        email: true
      },
      mobile: {
        required: true,
        digits: true,
        maxlength: 10,
        minlength: 10
      },
      pass_word: {
        required: true
      },
      user_city: {
        required: true
      },
      college: {
        required: true
      },
      branch: {
        required: true
      }
    },
    messages: {
      user_name: "Please enter name.",
      user_email: {
        required: "please enter email",
        email: "please enter valid email"
      },
      mobile: {
        required: "please enter mobile number",
        email: "please enter valid mobile number",
        maxlength: "mobile number contains 10 digits",
        minlength: "max 10 digits allowed"
      },
      pass_word: "Please enter password.",
      user_city: "Please enter user city.",
      college: "Please enter college.",
      branch: "Please enter branch."
    },
    submitHandler: function(form) {
      form.submit();
    }
  });

  $('#next1, #next2').click(function(e) {
    e.preventDefault();
    if ($('#signForm').valid()) {
      $($(this).attr('href')).show();
      $(this).closest('.tab').hide();
    }
  })
});
#second-form,
#third-form {
  display: none;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>

<div id="signup-form">
  <div id="row">
    <form id="signForm">
      <div id="first-form" class="tab">
        <fieldset id="body">
          <fieldset>
            <label for="name">Name</label>
            <input type="text" name="user_name" id="user_name" />
          </fieldset>
          <fieldset>
            <label for="mobile">Mobile</label>
            <input type="text" name="mobile" id="mobile" />
          </fieldset>
          <a class="next" id="next1" href="#second-form"><span>Next</span></a> 
        </fieldset>

      </div>
      <div id="second-form" class="tab">
        <fieldset>
          <label for="email">Email</label>
          <input type="text" name="user_email" id="user_email" />
        </fieldset>
        <fieldset>
          <label for="password">Password</label>
          <input type="password" name="pass_word" id="pass_word" />
        </fieldset>
        <a class="next" id="next2" href="#third-form"><span>Next</span></a> 
      </div>
      <div id="third-form" class="tab">
        <fieldset>
          <label for="city">City</label>
          <input type="text" name="user_city" id="user_city" />
        </fieldset>
        <fieldset>
          <label for="college">College</label>
          <input type="text" name="college" id="college" />
        </fieldset>
        <fieldset>
          <label for="branch">Branch</label>
          <input type="text" name="branch" id="branch" />
        </fieldset>
        <input type="submit" id="signup" value="Sign Up" />
      </div>
    </form>
  </div>
</div>

于 2015-03-11T03:03:27.633 回答