验证插件不验证所有字段

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"验证规则中的每个元素分配。

即使您没有使用提到的插件，我也建议您尝试一下。