Bootstrap jQuery & HTML5 Form Validation Demo

jQuery4u @samdeering

by jquery4u

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://www.jquery4u.com/demos/basic-jquery-validation-form/jquery.validate.min.js"></script>
<form action="#" method="post" id="rego-form" name="rego-form" class="form-horizontal" autocomplete="off" data-init="validate" data-messages='{"required":"This field is required."}'>
    <div class="control-group">
        <label class="control-label" for="name">Full Name</label>
        <div class="controls">
            <input type="text" placeholder="Enter your full name" autofocus id="name" name="name" data-required data-minlength="3" />
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="email">Email</label>
        <div class="controls">
            <input type="text" placeholder="Enter your email address" id="email" name="email" data-required data-email />
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="password">Password</label>
        <div class="controls">
            <input type="password" placeholder="Enter your password" id="password" name="password" data-required data-minlength="6" />
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <button type="submit" class="btn">Submit</button>
        </div>
    </div>
</form>

JavaScript

/**
 * Validate
 *
 * A plugin for client side validation for Twitter Bootstrap forms.
 *
 * Twitter Bootstrap:  v2.3.1
 * Plugin: v0.04
 *
 * @author: Carey Hinoki
 * @date: 2013-03-25
 * @updated: 2013-03-26
 */
(function ($, window, document, undefined) {
    "use strict"; // jshint ;_;

    var validators = {
        required: {
            name: 'required',
            type: 'required',
            message: 'Field is required'
        },
        minlength: {
            name: 'minlength',
            type: 'minlength',
            message: 'Must be more than {0} characters'
        },
        maxlength: {
            name: 'maxlength',
            type: 'maxlength',
            message: 'Must be less than {0} characters'
        },
        compareeq: {
            name: 'compareeq',
            type: 'compareeq',
            message: 'Field does not equal {0}'
        },
        comparelt: {
            name: 'comparelt',
            type: 'comparelt',
            message: 'Field is not less than {0}'
        },
        comparegt: {
            name: 'comparegt',
            type: 'comparegt',
            message: 'Field is not greater than {0}'
        },
        min: {
            name: 'min',
            type: 'min',
            message: 'Field is less than {0}'
        },
        max: {
            name: 'max',
            type: 'max',
            message: 'Field is more than {0}'
        },
        currency: {
            name: 'currency',
            type: 'regex',
            regex: new RegExp([
                '^',
                '(',
                    '[0-9]+',
                    '([.,][0-9]{2})?',
                '|',
                    '[0-9]{1,3}',
                    '([,][0-9]{3})*',
                    '([.][0-9]{2})?',
                '|',
                    '[0-9]{1,3}',
                    '([.][0-9]{3})*',
                    '([,][0-9]{2})?',
                ')',
                '$'
            ].join('')),
            message:...