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) {

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"not":return e!==s;case"same-as":return e===jQuery(s).val();case"min-num":return+e>=+s;case"max-num":return+s>=+e;case"between-num":return+e>=+s&&+r>=+e;case"min-length":return e.length>=+s;case"max-length":return+s>=e.length;case"exact-length":return e.length===+s;case"between":return e.length>=+s&&+r>=e.length;case"integer":return/^\s*\d+\s*$/.test(e);case"float":return/^[-+]?[0-9]+(\.[0-9]+)?$/.test(e);case"email":return this.email(e);default:throw Error("I don't know "+i+", sorry.")}},t.prototype.email=function(t){var e;return...