JSFiddle - React, Tailwind, and code Playground

by zaibtabs

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="hero-unit">
  <h1>Contact Form</h1>
  </br>
  <form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form">
    <div class="control-group">
      <label class="control-label" for="name">Name</label>
      <div class="controls">
        <input type="text" name="name" id="name" placeholder="Your name">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="email">Email Address</label>
      <div class="controls">
        <input type="text" name="email" id="email" placeholder="Your email address">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="subject">Subject</label>
      <div class="controls">
        <select id="subject" name="subject">
                    <option value="na" selected="">Choose One:</option>
                    <option value="service">Feedback</option>
                    <option value="suggestions">Suggestion</option>
                    <option value="support">Question</option>
                    <option value="other">Other</option>
                </select>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="message">Message</label>
      <div class="controls">
        <textarea name="message" id="message" rows="8" class="span5" placeholder="The message you want to send to us."></textarea>
      </div>
    </div>
    <div class="form-actions">
      <input type="hidden" name="save" value="contact">
      <button type="submit" class="btn btn-success">Submit...

JavaScript

$(document).ready(function() {

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

});