Form Validation and Formatter

by Evan Sharp

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<form data-form>
                    <fieldset>
                        <label for="firstName" class="m-all t1 d1-d3">First name
                            <input type="text" tabindex="1" name="firstName" id="firstName" data-validation="optional">
                        </label>
                        
                        <input type="text" tabindex="1" name="firstName" id="nfirstName" data-validation="optional">
                        
                        <label for="lastName" class="m-all t2-t5 d4-d6">Last name
                            <input type="text" tabindex="2" name="lastName" id="lastName" data-validation="optional">
                        </label>
            
                        <label for="email" class="m-all t1 d1-d3">Email
                            <input type="email" tabindex="3" name="email" id="email">
                        </label>
                        
                        <label for="phone" class="m-all t2-t5 d4-d6">Phone
                            <input type="tel" tabindex="4" name="phone" id="phone">
                        </label>
                        
                        <label for="state" class="m-all t1 d1-d3">State
                            <select tabindex="5" name="state" id="state">
                                <option selected="selected" value="">Please select</option>
                                <option value="AL">Alabama</option>
                                <option value="AK">Alaska</option>
                                <option value="AZ">Arizona</option>
                                <option value="AR">Arkansas</option>
                                <option value="CA">California</option>
                                <option value="CO">Colorado</option>
                                <option value="CT">Connecticut</option>
                                <option...

CSS

/*  ==================================================
    Copyright 2012 EverBank
    ==================================================  */

/*  ==================================================
    1. RESET
    2. CLEARFIX
    3. GLOBAL OBJECTS
    4. CONTAINERS
    5. TYPOGRAPHY
    6. LINKS
    7. BUTTONS
    8. FORMS
    9. TABLES
    10. HEADER
    11. NAVIGATION
    12. MARQUEES & SECONDARY PROMOS
    13. PRIMARY & SECONDARY CONTENT
    14. FOOTER
    15. CTAs
    16. MEDIA QUERIES
    ==================================================  */


/*  ==================================================
    1. RESET
    ==================================================  */

    html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    
    html {
        font-size: 62.5%;
    }
    
    body {
        line-height: 1;
    }
    
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section { 
        display: block;
    }
    
    nav ul {
        list-style: none;
    }
    
    a {
        margin: 0;
        padding: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    input, select {
        vertical-align: middle;
    }

/*  ==================================================
    2. CLEARFIX
   ...

JavaScript

/*!
 * Copyright 2013 EverBank. All rights reserved.
 *
 * Date: 2013-02-28
 */
(function($) {
    //Validation Methods
	$.validate = {
		email: function() {
			return (/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(this.val());
		},
		tel: function() {
			n = /\W*\d{3}\W*\d{3}\W*\d{4}/g.test(this.val());
			if(n){
				return true;
			}
			return false;
		},
        regex: function(regex){
            return (regex).test($.trim(this.val()));
        },
		number: function () {
			return (/^\d+$/).test($.trim(this.val()));
		},
		numeric: function () {
			return $.validate.number.call(this);
		},
		max:function(amount){
			return this.val().length <= amount;
		},
		min: function(amount){
			return this.val().length >= amount;
		},
		match:function(id){
			return this.val() == $("#"+id).val();
		},
		acct: function () {
			var n1 = this.val().replace(/[^\d]/g, "");
			if (n1.length == 10) {
				this.val(n1.replace(/(\d{7})(\d{3})/, "$1-$2"));
				return true;
			}
			return false;
		},
		name: function() {
			this.val(this.val().replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase();}));
			return true;
		},
		required: function() {
			if(/radio|checkbox/i.test(this.type)){
				return $("[name='"+this.name+"']").filter(':checked').length > 0;
			}
			else
				return this.val() !== "";
		},
		currency: function() {
			var num = this.val(),sign,cents;
			num = num.toString().replace(/\$|\,/g, '');
			if (isNaN(num)) num = "0";
			sign = (num == (num = Math.abs(num)));
			num = Math.floor(num * 100 + 0.50000000001);
			cents = num % 100;
			num = Math.floor(num / 100).toString();
			if (cents < 10) cents = "0" + cents;
			for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
			num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
			this.val(((sign) ? '' : '-') + '$' + num + '.' +...