多部分表單使用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!" 
      } 
    } 
}); 

這裏

$(document).ready(function() { 

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

Answer 1

另一個JQuery的文件有2個問題。

• 默認驗證不驗證隱藏要素 - 這可以通過ignore選項控制
• 您需要更改默認的錯誤顯示機制

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

 

 
});

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

注意：您必須添加一個上一個按鈕，以便使用可以返回到上一頁來修復錯誤。