NOTES

  • To receive feedback, fill in a field and tab to the next. To get negative feedback, only enter one character.
  • For explanations, see the tabs above for the code, and of course check out the plugin documentation.
Sample Contact Form (will not submit any information)

the HTML

Form elements with classes for Twitter Bootstrap styles and layout.

<form action="" id="contact-form" class="form-horizontal">
<fieldset>
  <legend>Sample Contact Form <small>(will not submit any information)</small></legend>
    <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="subject">Subject</label>
      <div class="controls">
        <input type="text" class="input-xlarge" name="subject" id="subject">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="message">Your Message</label>
      <div class="controls">
        <textarea class="input-xlarge" name="message" id="message" rows="3"></textarea>
      </div>
    </div>
    <div class="form-actions">
      <button type="submit" class="btn btn-primary btn-large">Submit</button>
      <button type="reset" class="btn">Cancel</button>
    </div>
  </fieldset>
</form>

the CSS

Found in style.css, these styles correspond to the labels generated by the Validate Plugin and provide the green check mark on success and the red message color on error.

Note that Twitter Bootstrap (v.2.0.2) comes with styles for "success" and "error" that apply green or red, respectively, to the entire control group.

The green checkmark icon (here named valid.png) is not a part of Twitter Bootstrap but rather from the free Kudos icon set.

label.valid {
  width: 24px;
  height: 24px;
  background: url(assets/img/valid.png) center center no-repeat;
  display: inline-block;
  text-indent: -9999px;
}
label.error {
  font-weight: bold;
  color: red;
  padding: 2px 8px;
  margin-top: 2px;
}

the jQuery

Setup

Link jQuery and the Validate Plugin at bottom of the html file, like so:

<!-- jQuery -->
  <script src="assets/js/jquery-1.7.1.min.js"></script>

<!-- Validate Plugin -->
  <script src="assets/js/jquery.validate.min.js"></script>

Initialize and Set Options

You'll find other options at the plugin's documentation page.

Note that Twitter Bootstrap (v.2.0.2) comes with styles for the classes "success" and "error." I've added these classes to the closest parent control group using the success and highlight options below.

$(document).ready(function(){

 $('#contact-form').validate(
 {
  rules: {
    name: {
      minlength: 2,
      required: true
    },
    email: {
      required: true,
      email: true
    },
    subject: {
      minlength: 2,
      required: true
    },
    message: {
      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');
  }
 });
}); // end document.ready

Care to leave a comment?