0

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" >

enter image description here

Improve this question
4
  • Where is JS code? Commented Sep 13, 2016 at 9:36
  • I haven't change anything in js code except rules and message.Validation is working properly. Commented Sep 13, 2016 at 9:38
  • Which plugin you used? Commented Sep 13, 2016 at 9:39
  • jquery.validate.min.js Commented Sep 13, 2016 at 9:40

1 Answer 1

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Cool!!! Its working perfectly..Thanks Mr.Rahul Patel