Simple jQuery Form validation

by ajinkyax

HTML

<form id="ajinkyaform" class="ajinkyaform" noValidate>
	    
	    <div class="mainform">
	    	<div class="formfields">
	    		<label>First name: </label>
	        	<input id="firstName" type="text" placeholder="First name" />
	    	</div>
	        

	        <div class="formfields">
	        	<label>Last name: </label>
	        	<input id="lastName" type="text" placeholder="Last name" />
	        </div>
	        

	        <div class="formfields">
	        	<label>Email address: </label>
	        	<input id="email" type="email" placeholder="Email id" required="required" errorMsg="Please enter a valid email address." />
	        </div>
	        

	        <div class="formfields">
	        	<label>Password: </label>
	        	<input id="password" type="password" placeholder="Password" />
	        </div>
	        
	    
	    	<div class="formfields">	    		
	    		<label>Billing address: </label>
	    		<input id="billingAddr" type="text" placeholder="Billing address" />
	    	</div>
	        
	        
	        <div class="element-checkbox">
	            <label>
	                <input id="useBilling" type="checkbox" />
	                <span>Use billing address for shipping</span>
	            </label>
	        </div>
	        
	        <div class="formfields">
	        	<label>Shipping address: </label>
	        	<input id="shippingAddr" type="text" placeholder="Shipping address" />
	        </div>
	    
	        <label>Favorite state: </label>
	        <div class="selectdropdown">        
	            <select id="favState" required="required" errorMsg="Please select a state.">
	                <option value="">-- Please select one --</option>
	                <option value="ME">Maine</option>
	                <option value="MD">Maryland</option>
	                <option value="MA">Massachusetts</option>
	                <option value="MI">Michigan</option>
	                <option value="MN">Minnesota</option>
	                <option...

CSS

@import 'https://fonts.googleapis.com/css?family=Open+Sans:300&subset=latin,greek-ext,cyrillic-ext,greek,vietnamese,cyrillic,latin-ext';


.mainform { background-color: #1A2223;
  font-size: 14px;
  font-family: 'Open Sans','Helvetica Neue', 'Helvetica', Arial, Verdana, sans-serif;
  color: #ECECEC;
  max-width: 480px;
  min-width: 150px;
  padding: 15px;
}

.mainform input[type="text"],
.mainform input[type="password"],
.mainform input[type="email"],
.mainform select,
.mainform button {
  color: #D3D3D3;
  border: none;
  border-bottom: solid 1px rgba(255,255,255,0.2);
  background: #000000;
  -webkit-transition: border-color 0.3s;
  transition: border-color 0.3s;
  resize: none;
  outline: medium none;
  padding: 0.6em 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 1.1em;
  width: 100%;
}
.mainform button {
  cursor: pointer;
}

.mainform label {
  display: block;
  clear: both;
  font-family: inherit;
  color: inherit;
  font-size: 1em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.mainform .selectdropdown {
  position: relative;
}
.mainform .caret {
  position: absolute;
  
  border-top: 4px solid #ECECEC;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;

  right: 10px;
  top: 20px;
}

/* Radio & checkbox */
.element-checkbox {
  overflow:hidden;
  position: relative;
}
.mainform input[type=checkbox] {
  z-index:1;
  position: absolute;
  float: left;
	width: 1.5em;
	height: 1.5em;
	font-size: 1em;
	opacity: 0.01;
  margin: 0;
  cursor: pointer;
}

.mainform input[type=checkbox]+span{
  position: relative;
  cursor: pointer;
}

.mainform input[type=checkbox]+span:before {
  position: relative;
  display: inline-block;
  font-family: Helvetica;
  margin-right: 0.5em;
  width: 1.5em;
  height: 1.5em;
  color: transparent;
  font-size: 1em;
  line-height: 1.55;
 ...

JavaScript

// --- Instructions ---
// *** Note that ALL javascript/jquery code should appear in this panel, below the instructions.
// *** There should be none in the HTML panel.

// Click the Update button in the JSFiddle banner to save your work. (Do that often, so you don't lose your work by accident.)
// Click the Run button in the JSFiddle banner to see the results of your changes as you work.

// --- Part 1 ---
// 1. Make form look presentable (use your judgement)
// 2. If a user clicks on a label the corresponding input field should get focus.
// 3. Password field should not show plain text.
// 4. Clicking on checkbox should:
//    - copy billing address to shipping address
//    - disable shipping address
//    - unchecking should enable shipping address
// 5. OK button should be a jqueryui button.

// --- Part 2 ---
// When OK button is clicked implement the following:
// 1. Email address and favorite state are required fields.
// 2. Ensure email address is valid format.
// 3. Errors should be flagged by:
//    - making field background turn light red.
//    - setting error message as tooltip.
// 4. Consider that users may correct their errors and click OK again.
// 5. If no errors then:
//    - create json object that represents input data.
//    - log that object to console.

// --- Extra Credit ---
// 1. Change Favorite state to use jqueryui autocomplete.

// --- End Instructions ---

$(function () {

    $.Validate = function(el, options){
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;
        
        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;
        
        // Add a reverse reference to the DOM object
        base.$el.data("Validate", base);

        base.defaultOptions = {

        };
        
        base.init = function(){
            
            base.options =...