how to highlight invalid section — twitter bootstrap/jquery/validate plugin - jquery-plugins

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 validate it with bassistance Validate 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 the div currently validated, but this code adds class to every .control-group occurence, not only validated one :(
thx 4 yr help.

Answer 1

JSFiddler Example
This will validate as you leave each field or when you hit the submit button all fields that meet 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');
}
});
});