驗證插件不驗證所有字段

Question

我使用jQuery驗證插件進行表單驗證。它只是檢查第一場。如果第一個字段驗證是真的，那麼它就是提交表單。它不是驗證其​​他領域..

我使用引導3.0

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#contact').validate({ 
     rules: { 
      firstname: { 
       required: true, 
       minlength: 5, 
      }, 
      useremail: { 
       required: true, 
      } 
     } 
    }); 
}) 
</script> 
    <form action="" method="" id="contact"> 
      <div class="form-group"> 
       <label> Your Name </label> 
       <input type="text" class="form-control" placeholder="Enter Your Name" id="firstname" required="" minlength="5"/> 
      </div> 

      <div class="form-group"> 
       <label> Your E-mail </label> 
       <input type="email" class="form-control" placeholder="Enter Your Email" id="useremail" required=""/> 
      </div> 

      <div class="form-group"> 
       <label> Contact Detail </label> 
       <input type="text" class="form-control" placeholder="Enter Contact Number" id="mobile" minlength="10" maxlength="10" required=""/> 
      </div> 
      <div class="form-group"> 
       <label> Type</label> 
       <select class="form-control"> 
       <option> Inquiry </option> 
       <option> Complaints </option> 
       <option> Feedback </option> 
       <option> Others </option> 
      </select> 
       </div> 
      <div class="form-group"> 
       <label> Message</label> 
       <textarea class="form-control" rows="3" cols="5" placeholder="Enter Your Message Here..." id="message" minlength='10' required=""></textarea> 
      </div> 
      <button type="submit" class="btn btn-primary btn-lg"> Send</button> 
     </form> 

我不知道什麼是我的代碼的問題呢？請幫助...

在此先感謝

Answer 1

您的驗證選項的錯字。神蹟必須是規則。

名稱的屬性，還必須指定：

HTML

<form action="" method="" id="contact"> 
    <div class="form-group"> 
     <label>Your Name</label> 
     <input type="text" class="form-control" placeholder="Enter Your Name" name="firstname" required="" minlength="5" /> 
    </div> 
    <div class="form-group"> 
     <label>Your E-mail</label> 
     <input type="email" class="form-control" placeholder="Enter Your Email" name="useremail" required="" /> 
    </div> 
    <div class="form-group"> 
     <label>Contact Detail</label> 
     <input type="text" class="form-control" placeholder="Enter Contact Number" name="mobile" minlength="10" maxlength="10" required="" /> 
    </div> 
    <div class="form-group"> 
     <label>Type</label> 
     <select class="form-control"> 
      <option>Inquiry</option> 
      <option>Complaints</option> 
      <option>Feedback</option> 
      <option>Others</option> 
     </select> 
    </div> 
    <div class="form-group"> 
     <label>Message</label> 
     <textarea class="form-control" rows="3" cols="5" placeholder="Enter Your Message Here..." id="message" minlength='10' required=""></textarea> 
    </div> 
    <button type="submit" class="btn btn-primary btn-lg">Send</button> 
</form> 

的Javascript

$(document).ready(function() { 
    $('#contact').validate({ 
     rules: { 
      firstname: { 
       required: true, 
       minlength: 5, 
      }, 
      useremail: { 
       required: true, 
      } 
     }, 
     errorClass : 'has-error', 
     validClass : 'has-success', 
     highlight:function(element, errorClass, validClass) { 
      $(element).parents('div').addClass(errorClass).children().removeClass(errorClass); 
      $(element).parents('div').removeClass(validClass).children().removeClass(validClass); 
     }, 
     unhighlight: function(element, errorClass, validClass) { 
      $(element).parents('div').removeClass(errorClass).children().removeClass(errorClass); 
      $(element).parents('div').addClass(validClass).children().removeClass(validClass); 
     } 
    }); 
}) 

小提琴here

錯誤和有效的stying可以使用這個CSS完成：

.has-error 
{ 
    background-color: rgb(255, 0, 0); 
} 
.has-success 
{ 
    background-color: rgb(0, 255, 0); 
} 

Answer 2

除了拼寫錯誤。 如果你使用這個插件Jquery validation。 您缺少輸入的名稱屬性。

<input type="email" class="form-control" placeholder="Enter Your Email" id="useremail" name="useremail"/> 

根據文檔，你必須需要驗證的「名稱」屬性，並指定與即name="firstname"驗證規則中的每個元素分配。

即使您沒有使用提到的插件，我也建議您嘗試一下。