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>
<form action="#" method="post" id="rego-form" name="rego-form" class="form-horizontal" autocomplete="off">
    <div class="control-group">
        <label class="control-label" for="name">Full Name</label>
        <div class="controls">
            <div class="input-prepend"> <span class="add-on"><i class="icon-user"></i></span>

                <input type="text" class="input-xlarge" placeholder="Enter your full name" id="name" name="name" />
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="email">Email</label>
        <div class="controls">
            <div class="input-prepend"> <span class="add-on"><i class="icon-envelope"></i></span>

                <input type="text" placeholder="Enter your email address" id="email" name="email" />
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="password">Password</label>
        <div class="controls">
            <div class="input-prepend"> <span class="add-on"><i class="icon-lock"></i></span>

                <input type="password" placeholder="Enter your password" id="password" name="password" />
            </div>
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <button data-loading-text="loading..." type="submit" class="btn btn-success">Submit form</button>
        </div>
    </div>
</form>

JavaScript

(function ($, window, document, undefined) {

    $(document).ready(function () {
        var metrics = [
            ['#name]', 'presence', 'Name is required.'],
            ['#email]', 'presence', 'Email is required.'],
            ['#email]', 'email', 'This must be a valid email.'],
            ['#password]', 'presence', 'Password is required.']
        ];
    });

    $("#rego-form").nod(metrics);


}(window.jQuery, window, document));


/* jquery-nod - v1.0.1 - 2013-04-13 
 * https://github.com/casperin/nod 
 * Gorm Casper: Licensed MIT
 */ (function (t) {
    var e, s = function (t, e) {
        return function () {
            return t.apply(e, arguments)
        }
    };
    e = function () {
        function t(t, e) {
            this.metric = e, this.run = s(this.run, this), this.getVal = this.makeGetVal(t)
        }
        return t.prototype.run = function () {
            return this.verify(this.metric, this.getVal())
        }, t.prototype.makeGetVal = function (t) {
            var e, s;
            return s = t.attr("type"), "checkbox" === s ? function () {
                return t.is(":checked")
            } : "radio" === s ? (e = t.attr("name"), function () {
                return jQuery("[name=" + e + "]").filter(":checked").val()
            }) : function () {
                return jQuery.trim(t.val())
            }
        }, t.prototype.verify = function (t, e) {
            var s, r, i, n;
            if (t && t.constructor && t.call && t.apply) return t(e);
            if (t instanceof RegExp) return t.test(e);
            if (n = jQuery.map(t.split(":"), jQuery.trim), i = n[0], s = n[1], r = n[2], "same-as" === i && 1 !== jQuery(s).length) throw Error("same-as selector must target one and only one element");
            if (!e && "presence" !== i) return !0;
            switch (i) {
                case "presence":
                    return !!e;
                case "exact":
                    return e === s;
                case...