Jquery 中的复选框和标签之间显示验证错误

Question

我在 jquery 中遇到一些问题 validation.Error 在复选框和 label.I 之间显示必须显示错误 below.would 你能帮帮我吗？

Html

<input type="checkbox" name="standard_subject[]"  value="IX" ><span class="checkboxtext">IX</span>
<input type="checkbox" name="standard_subject[]" value="X" ><span class="checkboxtext ">X</span>
<input type="checkbox" name="standard_subject[]" value="Maths"><span class="checkboxtext">Maths</span>
<input type="checkbox" name="standard_subject[]" value="Science"><span class="checkboxtext">Science</span>
<input type="submit" value="Download now"  name="submit" >

Answer 1

请使用 "errorPlacement" 事件 jquery 验证 js 错误放置。请查看下面的代码片段以获得更多理解。

$('form').validate({
  rules: {
    "standard_subject[]": { 
      required: true, 
      minlength: 1 
    } 
  },
  messages: {
    "standard_subject[]": "Please select standard."
  },
  errorPlacement: function(label, element) {
    label.addClass('errorMsq');
    element.parent().append(label);
  },
});
$('button').click(function () {
  $('form').valid();
});

.errorMsq {
  color: red;
  display: block;
}

<form>
  <div>
    <input type="checkbox" name="standard_subject[]"  value="IX" ><span class="checkboxtext">IX</span>
    <input type="checkbox" name="standard_subject[]" value="X" ><span class="checkboxtext ">X</span>
    <input type="checkbox" name="standard_subject[]" value="Maths"><span class="checkboxtext">Maths</span>
    <input type="checkbox" name="standard_subject[]" value="Science"><span class="checkboxtext">Science</span>
  </div>
  <br>
  <input type="submit" value="Download now"  name="submit" > 
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>

Jquery 中的复选框和标签之间显示验证错误

Validation error showing in between checkbox and label in Jquery

html

css

jquery

jquery-validate