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

jquery-plugins, jquery-validate, twitter-bootstrap

Solution

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');
  }
 });
});

Problem

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("&#10004;").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.

Original source