How to highlight an invalid section - twitter bootstrap / jquery / validate plugin

Question

I have a form in twitter bootstrap:

<div class="form-div"> <form id="fvujq-form1" method="post" action=""> <div class="control-group name"> <fieldset> <label>Name *</label> <input type="text" name="name"> </fieldset> </div> <div class="control-group email"> <fieldset> <label>E-Mail *</label> <input type="text" name="email"> </fieldset> </div> <div class="control-group comment"> <fieldset> <label>Your comment *</label> <textarea name="comment"></textarea> </fieldset> </div> <button class="btn btn-primary">Submit</button> </form> </div> 

and this is how I test it with bassistance. Confirm the plugin:

 $(document).ready(function() { $("#fvujq-form1").validate({ submitHandler:function(form) { SubmittingForm(); }, success: function(label) { label.html("✔").addClass("valid"); }, onfocusout: function(element) { $(element).valid(); }, focusInvalid: false, highlight: function(element, errorClass, validClass) { $('.form-div').find('.control-group' + element.id).addClass('error'); }, unhighlight: function(element, errorClass, validClass) { $('.form-div').find('.control-group' + element.id).removeClass('error'); }, errorClass: "help-inline", errorElement: "strong" 

I want to add .error to a div that is currently being tested, but this code adds a class to each .control-group event, not just the checked one :(

Thank you help 4 years.

Answer 1

JSFiddler example

This will be confirmed when you exit each field or when you click the submit button, all fields that comply with the rules will present errors.

HTML

 <form action="" id="fvujq-form1" class="form-horizontal"> <fieldset> <div class="control-group"> <label class="control-label" for="name">Your Name</label> <div class="controls"> <input type="text" class="input-xlarge" name="name" id="name"> </div> </div> <div class="control-group"> <label class="control-label" for="email">Email Address</label> <div class="controls"> <input type="text" class="input-xlarge" name="email" id="email"> </div> </div> <div class="control-group"> <label class="control-label" for="comment">Comment</label> <div class="controls"> <input type="text" class="input-xlarge" name="comment" id="comment"> </div> </div> <div class="form-actions"> <button type="submit" class="btn btn-primary">Submit</button> </div> </fieldset> </form> 

Javascript

 $(document).ready(function(){ $('#fvujq-form1').validate( { rules: { name: { minlength: 2, required: true }, email: { required: true, email: true }, comment: { minlength: 2, required: true }, }, highlight: function(element) { $(element).closest('.control-group').removeClass('success').addClass('error'); }, success: function(element) { element .text('OK!').addClass('valid') .closest('.control-group').removeClass('error').addClass('success'); } }); });