BootStrap Contact Form

by Taqi_Shah

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="" 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">
    ...

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

});