jQuery validate error placement

by Florian Bar

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<form id="signupForm">

  <div class="form-group">
    <label>First Name</label>
    <input type="text" class="form-control" name="firstName">
  </div><br>
  
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="1" name="checkbox1">
    <label class="form-check-label">
      I confirm bla bla bla...
    </label>
  </div><br>
  
  <button type="submit">Submit</button>
</form>

CSS

label.error {
  display: block;
  color: red;
}

JavaScript

$('#signupForm').validate({
  rules: {
  	firstName: "required",
  	checkbox1: "required"
  },
	message: {
  	firstName: "Required",
  	checkbox1: "Required"
  },
	errorPlacement: function(error, element) {    
		if (element[0].type == "checkbox") {
    	error.appendTo(element.parent());
    } else {
    	error.insertAfter(element);
    }
	}
});