Front - end. I use bootstrap + jquery. It got to the validation form (jQuery Validation Plugin), did everything except the CheckBox. Because, if the CheckBox is not checked, the text that the "Required" field is displayed to the right, constantly, and you get this crap.

(CheckBox) You have to agree with our policy first. I am agree with terms and rules!

Text that is in bold should be below. Please tell me how to make it validate using jQuery Validation Plugin or another similar script, so that the text would be below?

  • I did not understand exactly what the problem is, if my memory serves me, then the validator defaults to some label with the default text, what is the problem that will address this appearing element with css and put it where it should be? - Roman

1 answer 1

Something like this, this is my vision, I think the idea is clear to you

$(function() { $('#test').validate({ errorPlacement: function(error, element) { if (element.attr("name") == "testCheckbox") { //Здесь пиши любые операции если чекбокс не отмечен error.insertAfter(element.parent()); } else { error.insertAfter(element); } return true; }, ignore: ":disabled", rules: { testCheckbox: { required: true }, title: { required: true } }, messages:{ testCheckbox: { required : "custom error checkbox text" } } }); }); 
 input.error { border: 1px solid red; outline: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script> <form id="test"> <div> <input type="text" name="title"> </div> <div> <input type="checkbox" name="testCheckbox"><span>I am agree with terms and rules!</span> </div> <div> <input type="submit"> </div> </form>