multipart form validate with validate.js

Question

validate.js와 함께 여러 페이지 양식을 사용하고 싶지만이 방법으로 필드의 유효성을 검사 할 수 없습니다. 실제로 JQuery를 사용하여 양식 필드를 숨기거나 표시하여 여러 페이지를 표시합니다. 그러나이 작업을 수행하는 데 하나의 JQuery 파일을 사용하고 있으며 물론 폼의 유효성을 검사하는 또 다른 파일을 사용하고 있습니다. 이것이 문제가 될 수 있습니까?

jsfiddle은 다음과 같습니다. JSFiddle 실제로 작동하지 않습니다 becuse 거기에 2 JQuery 파일,하지만 그냥 HTML 및 자바 스크립트를보고 싶었어요.

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와 문서는이 문제가 있습니다.

• 기본적으로 검증 숨겨진 요소를 확인하지 않습니다 - 이것은 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>

을 변경해야

참고 : 이전 페이지로 돌아가서 수정할 수 있도록 이전 버튼을 추가해야합니다. 오류.