使用validate.js进行多部分表单验证

Question

我想使用带有validate.js的多页表单，但是这些字段没有验证这样做。我实际上在做的是使用JQuery来隐藏和显示表单字段以获得多个页面。但是，我使用一个JQuery文件来执行此操作，当然还有另一个用于验证表单。这会导致问题吗？

jsfiddle在下面。 JSFiddle没有实际工作因为有2个JQuery文件，但只是想让你看到html和javascript。

http://jsfiddle.net/tunm34p1/1/

$("#mbContact").validate({

        rules:{
            fname:{
                required:true
            },
            lname:{
                required: true
            },
            csheme:{
                required: true
            },
            deladdr:{},
            emailaddress:{
                email: true,
                required: true
            },
            typeOfEvent:{
                required: true
            },
            homePhone:{
                digits: true
            },
            workPhone:{
                digits: true
            },
            mobilePhone:{
                digits: true
            }
        },
        messages:{
            fname:{
                required:"You need to enter your name!"
            },
            lname:{
                required:"you need your last name too!"
            }
    }
});

这里的另一个JQuery文档

 $(document).ready(function() {

        $("button, input[type='button']").click(function(){
            $('#contact').hide();
            $('#nextForm').show();
        });
 });

Answer 1

有两个问题。

• 默认情况下，验证程序不验证隐藏的元素 - 这可以通过ignore选项控制
• 您需要更改默认错误显示机制

＆＃13;

＆＃13;

$(document).ready(function() {

  $("#mbContact").validate({
    ignore: '',
    //if page wise validation is not enabled
    errorLabelContainer: "#messageBox",
    wrapper: "li",

    rules: {
      fname: {
        required: true
      },
      lname: {
        required: true
      },
      csheme: {
        required: true
      },
      deladdr: {},
      emailaddress: {
        email: true,
        required: true
      },
      typeOfEvent: {
        required: true
      },
      homePhone: {
        digits: true
      },
      workPhone: {
        digits: true
      },
      mobilePhone: {
        digits: true
      }

    },

    messages: {

      fname: {
        required: "You need to enter your name!"
      },
      lname: {
        required: "you need your last name too!"
      }



    }

  });



});


//another jquery document

$(document).ready(function() {


  $("button, input[type='button']").click(function() {
    //move to next page only of current one is valid
    if(!$('#contact').find(':input').valid()){
      return;
    }
    
    $('#contact').hide();
    $('#nextForm').show();
  });


});

＆＃13;

<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>

<h2>Contact Form</h2>
<!-- if page wise validation is not enabled -->
<ul id="messageBox"></ul>
<div id="contact" class="basic-grey" style="">
  <form id="mbContact" action="" method="post">
    <label for="fname">First Name</label>
    <input id="fname" name="fname" type="text" />
    <br/>
    <label for="lname">Last Name</label>
    <input id="lname" name="lname" type="text" />
    <br/>
    <label for="emailaddress">Email Address</label>
    <input id="emailaddress" name="emailaddress" type="text" />
    <br/>
    <label for="typeOfEvent">Type Of Event</label>
    <select name="typeOfEvent" id="typeOfEvent">
      <option value>Select</option>
      <option value="Wedding">Wedding</option>
      <option value="Birthday">Birthday</option>
      <option value="Special Occasion">Special Occasion</option>
      <option value="BabyShower">Baby Shower</option>
    </select>
    <br/>
    <label for="datepicker">Event Date</label>
    <input type="text" id="datepicker" />
    <br/>
    <label for="cscheme">Color Scheme</label>
    <input id="cscheme" name="cscheme" type="text" />
    <br/>
    <label for="noOfServings">Number Of Servings</label>
    <select name="noOfServings" id="noOfServings">
      <option value>Choose Number</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
    <br/>
    <input type="button" value="next" name="next" class="nextB" />
</div>
<div id="nextForm" style="display:none;" class="basic-grey">
  <label for="noOfTiers">Number Of Tiers</label>
  <select name="noOfTiers" id="noOfTiers">
    <option value>Tiers</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  <br/>
  <label for="workPhone">Work Telephone</label>
  <input type="text" id="workPhone" name="workPhone" />
  <br/>
  <label for="homePhone">Home Telephone</label>
  <input type="text" id="homePhone" name="homePhone" />
  <br/>
  <label for="mobilePhone">Mobile Telephone</label>
  <input type="text" id="mobilePhone" name="mobilePhone" />
  <br/>
  <label for="deladdr">Delivery Address</label>
  <input id="deladdr" name="deladdr" type="text" />
  <br/>
  <input type="submit" value="submit" class="submit" name="submit" />
</div>
</form>

＆＃13;

＆＃13;

＆＃13;

注意：您必须添加上一个按钮，以便使用可以返回上一页来修复错误。