jQuery Validation with Twitter Bootstrap http://www.rayfaddis.com/blog/2013/05/27/jQuery-validation-with-twitter-boostrap/

form.html

<!-- See http://twitter.github.io/bootstrap/base-css.html#forms for more Boostrap form and validation examples -->
<form name="form" id="form" class="form-horizontal" action="submit.php" method="post">
<div class="control-group">
  <label class="control-label" for="inputName">Name</label>
  <div class="controls">
    <input type="text" name="name" id="inputName" placeholder="Name" maxlength="75" />
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="inputCity">City</label>
  <div class="controls">
    <input type="text" name="city" id="inputCity" placeholder="City" maxlength="50" />
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="inputState">State</label>
  <div class="controls">
    <input type="text" name="state" id="inputState" placeholder="State" maxlength="25" />
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="inputEmail">Email</label>
  <div class="controls">
    <div class="input-append">
      <input type="text" name="email" id="inputEmail" placeholder="Email Address" maxlength="255" />
      <span class="add-on"><i id="emailHelp" class="icon-info-sign"></i></span>
    </div>
  </div>
</div>
<div class="control-group">
  <div class="controls">
    <button type="submit" class="btn">Submit</button>
  </div>
</div>
</form>

<script type="text/javascript">
$(document).ready(function() {
  $('#form').validate(
  {
    rules: {
      name: {
        minlength: 2,
        required: true
      },
      city: {
        minlength: 2,
        required: true
      },
      state: {
        minlength: 2,
        required: true
      },
      email: {
        required: true,
        email: true
      }
    }
  });
});
</script>

javascript.js

// to be placed in your layout/template so that it's applied to all pages
$(document).ready(function() {
  jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
      // if the input has a prepend or append element, put the validation msg after the parent div
      if(element.parent().hasClass('input-prepend') || element.parent().hasClass('input-append')) {
        error.insertAfter(element.parent());		
      // else just place the validation message immediatly after the input
      } else {
        error.insertAfter(element);
      }
    },
    errorElement: "small", // contain the error msg in a small tag
    wrapper: "div", // wrap the error message and small tag in a div
    highlight: function(element) {
      $(element).closest('.control-group').addClass('error'); // add the Bootstrap error class to the control group
    },
    success: function(element) {
      $(element).closest('.control-group').removeClass('error'); // remove the Boostrap error class from the control group
    }
  });
});

style.css

/* to be added to your global CSS file */
div small.error {
  color: #B94A48; /* color to match Bootstraps error class */
}