Form Validation - Login Example

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<div class="container">
    <form class="form-signin" method="post" action="" id="form-signin">
         <h2 class="form-signin-heading">Registration</h2>

        <div class="control-group">
            <label class="control-label" for="first_name">First Name:</label>
            <div class="controls">
                <input size="50" name="first_name" id="first_name" value="" type="text" class="form-control" placeholder="First Name" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="last_name">Last Name:</label>
            <div class="controls">
                <input size="50" name="last_name" id="last_name" value="" type="text" class="form-control" placeholder="Last Name" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="password">Password:</label>
            <div class="controls">
                <input size="50" name="password" id="password" value="" type="password" class="form-control" placeholder="Password" />
            </div>
        </div>
        <label class="checkbox">
            <input type="checkbox" name="save" value="" />Remember me</label>
        <button name="submit" id="submit" value="" type="submit" class="btn btn-large btn-primary btn-block">Sign in</button>
    </form>
</div>

CSS

body {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #eee;
}
.form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .form-signin-heading, .form-signin .checkbox {
    margin-bottom: 10px;
}
.form-signin .checkbox {
    font-weight: normal;
}
.form-signin .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="text"], .form-signin input[type="password"] {
    margin-bottom: 10px;
}
.form-signin label {
    font-weight: normal;
}
.error {
    color: #b94a48;
}

JavaScript

$(document).ready(function () {
    jQuery.validator.addMethod("lettersonly", function (value, element) {
        return this.optional(element) || /^[a-z0-9_-]+$/i.test(value);
    }, "Please use only a-z0-9_-");
    $('#form-signin').validate({
        rules: {
            first_name: {
                minlength: 3,
                maxlength: 15,
                required: true,
                lettersonly: true
            },
            last_name: {
                minlength: 3,
                maxlength: 15,
                required: true,
                lettersonly: true
            },
            password: {
                minlength: 3,
                maxlength: 15,
                required: true,
                lettersonly: true
            },
        },
        highlight: function (element) {
            $(element).closest('.control-group').addClass('has-error');
        }
    });
});