複選框錯誤消息定位，引導+ jQuery驗證

Question

我已經使用引導程序構建了一個表單，我可以使用jquery驗證插件對文本框進行驗證，並使用errorPlacement將錯誤放置在設計的最後一列中。但是在我的設計中它不適用於複選框，因爲結構不相似，我們該如何解決這個問題？

下面是我的代碼的jsfiddle：https://goo.gl/dGRm0b

我還是新來引導和jQuery驗證。

謝謝。

Answer 1

你可以添加一個if/else語句到你的errorPlacement來找到一個div來保存複選框的錯誤信息。

$.validator.addMethod("startsWithA", function(value, element) { 
 
    return /^A/.test(value); 
 
}, "input must start with A"); 
 

 
$('form').validate({ 
 

 
    rules: { 
 
    fullname: { 
 
     required: true, 
 
     minlength: 5, 
 
     maxlength: 10, 
 
     startsWithA: true 
 
    }, 
 
    resume: { 
 
     required: true 
 
    }, 
 
    language: { 
 
     required: true 
 
    } 
 
    }, 
 
    messages: { 
 
    fullname: { 
 
     startsWithA: "my new message" 
 
    }, 
 
    language: { 
 
     required: "At least one language is required" 
 
    } 
 
    }, 
 

 
    highlight: function(element, errorClass) { 
 
    $(element).closest(".form-group").addClass("has-error"); 
 
    }, 
 
    unhighlight: function(element, errorClass) { 
 
    $(element).closest(".form-group").removeClass("has-error"); 
 
    }, 
 
    errorPlacement: function(error, element) { 
 
    if (element.attr("name") == "language") { 
 
     error.insertAfter("#checkboxGroup"); 
 
    } else { 
 
     error.appendTo(element.parent().next()); 
 
    } 
 
    } 
 
});

.error { 
 
    color: red; 
 
    margin-top: 6px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <form class="form-horizontal"> 
 
    <fieldset> 
 
     <legend>Basics</legend> 
 
     <div class="form-group"> 
 
     <label class="col-sm-2 control-label" for="fullname">Full Name:</label> 
 
     <div class="col-sm-7"> 
 
      <input type="text" id="fullname" class="form-control" name="fullname" /> 
 
     </div> 
 
     <div class="col-sm-3"></div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label class="col-sm-2 control-label" for="resume">Resume</label> 
 
     <div class="col-sm-7"> 
 
      <input type="file" id="resume" class="form-control" name="resume" /> 
 
     </div> 
 
     <div class="col-sm-3"></div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label class="col-sm-2 control-label" for="password">Password</label> 
 
     <div class="col-sm-7"> 
 
      <input type="password" id="password" class="form-control" name="password" /> 
 
     </div> 
 
     <div class="col-sm-3"></div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label class="col-sm-2 control-label" for="comments">Comments</label> 
 
     <div class="col-sm-7"> 
 
      <textarea cols="40" rows="5" id="comments" class="form-control" name="comments"></textarea> 
 
     </div> 
 
     <div class="col-sm-3"></div> 
 
     </div> 
 
    </fieldset> 
 
    <fieldset> 
 
     <legend>Skills</legend> 
 
     <div class="form-group"> 
 
     <div class="col-sm-offset-2 col-sm-7"> <span>Enter your programming languages</span> 
 

 
      <div class="checkbox"> 
 
      <label for="csharp"> 
 
       <input type="checkbox" id="csharp" name="language" />C#</label> 
 
      </div> 
 
      <div class="checkbox"> 
 
      <label for="php"> 
 
       <input type="checkbox" id="php" name="language" />PhP</label> 
 
      </div> 
 
      <div class="checkbox"> 
 
      <label for="java"> 
 
       <input type="checkbox" id="java" name="language" />Java</label> 
 
      </div> 
 
      <div id="checkboxGroup"></div> 
 
     </div> 
 
     <div class="col-sm-3"></div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <div class="col-sm-offset-2 col-sm-10"> <span>Enter your level</span> 
 

 
      <div class="radio"> 
 
      <label for="csharp"> 
 
       <input type="radio" id="beginner" name="level" />Beginner</label> 
 
      </div> 
 
      <div class="radio"> 
 
      <label for="php"> 
 
       <input type="radio" id="intermediate" name="level" />Intermediate</label> 
 
      </div> 
 
      <div class="radio"> 
 
      <label for="java"> 
 
       <input type="radio" id="expert" name="level" />Expert</label> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <div class="col-sm-offset-2 col-sm-10"> 
 
      <input type="submit" id="submit" class="btn btn-primary" value="Submit" /> 
 
      <input type="reset" id="submit" class="btn btn-primary" value="Reset" /> 
 
     </div> 
 
     </div> 
 
    </fieldset> 
 
    </form> 
 
</div>