Validation error showing in between checkbox and label in Jquery

Question

I am getting some issue in jquery validation.Error displaying in between checkbox and label.I have to display error below.would you please help me?

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

Please use "errorPlacement" event of jquery validate js for error placement. Please check below snippet for more understanding.

$('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>