Updated demo and fixed issues

- Issue ryanseddon#6 and 8: Non form elements such as a anchors triggering focus/blur events and checking for for validity object that doesn't exist.
- Issue ryanseddon#7: Fixed placeholder working backwards when field isn't required.
- Added extra fields in demo.

h5f.js

@@ -14,7 +14,7 @@ var H5F = H5F || {};
     var field = d.createElement("input"),
         emailPatt = new RegExp("^([a-z0-9_.-]+)@([0-9a-z.-]+).([a-z.]{2,6})$","i"), 
         urlPatt = new RegExp("[a-z][-\.+a-z]*:\/\/","i"),
-		nodes = new RegExp("^(input|select|textarea)$","i"),
+        nodes = new RegExp("^(input|select|textarea)$","i"),
         usrPatt, curEvt, args;
 
     H5F.setup = function(form,settings) {
@@ -73,55 +73,55 @@ var H5F = H5F || {};
             pattern = elem.getAttribute("pattern"),
             placeholder = elem.getAttribute("placeholder"),
             isType = /^(email|url)$/i,
-			evt = /^(input|keyup)$/i,
+            evt = /^(input|keyup)$/i,
             fType = ((isType.test(type)) ? type : ((pattern) ? pattern : false)),
             patt = H5F.pattern(elem,fType),
             step = H5F.range(elem,"step"),
             min = H5F.range(elem,"min"),
             max = H5F.range(elem,"max");
 
         elem.checkValidity = function() { return H5F.checkValidity(elem); };
-		
-		elem.validity = {
+        
+        elem.validity = {
             valueMissing: missing,
-			patternMismatch: patt,
-			rangeUnderflow: min,
+            patternMismatch: patt,
+            rangeUnderflow: min,
             rangeOverflow: max,
             stepMismatch: step,
             valid: (!missing && !patt && !step && !min && !max)
         };
 
-		if(placeholder && !evt.test(curEvt)) { H5F.placeholder(elem); }
+        if(placeholder && !evt.test(curEvt)) { H5F.placeholder(elem); }
     };
     H5F.checkField = function (e) {
         var el = H5F.getTarget(e) || e, // checkValidity method passes element not event
             events = /^(input|keyup|focusin|focus)$/i,
-			checkForm = true;
+            checkForm = true;
 
-		if(nodes.test(el.nodeName)) {
-			curEvt = e.type;
-			if(!H5F.support()) { H5F.validity(el); }
-			
-			if(el.validity.valid) {
-				H5F.removeClass(el,[args.invalidClass,args.requiredClass]);
-				H5F.addClass(el,args.validClass);
-			} else if(!events.test(curEvt)) {
-				if(el.validity.valueMissing) {
-					H5F.removeClass(el,[args.invalidClass,args.validClass]);
-					H5F.addClass(el,args.requiredClass);
-				} else {
-					H5F.removeClass(el,[args.validClass,args.requiredClass]);
-					H5F.addClass(el,args.invalidClass);
-				}
-			} else if(el.validity.valueMissing) {
-				H5F.removeClass(el,[args.requiredClass,args.invalidClass,args.validClass]);
-			}
-			if(curEvt === "input" && checkForm) {
-				// If input is triggered remove the keyup event
-				H5F.unlisten(el.form,"keyup",H5F.checkField,true);
-				checkForm = false;
-			}
-		}
+        if(nodes.test(el.nodeName)) {
+            curEvt = e.type;
+            if(!H5F.support()) { H5F.validity(el); }
+            
+            if(el.validity.valid) {
+                H5F.removeClass(el,[args.invalidClass,args.requiredClass]);
+                H5F.addClass(el,args.validClass);
+            } else if(!events.test(curEvt)) {
+                if(el.validity.valueMissing) {
+                    H5F.removeClass(el,[args.invalidClass,args.validClass]);
+                    H5F.addClass(el,args.requiredClass);
+                } else {
+                    H5F.removeClass(el,[args.validClass,args.requiredClass]);
+                    H5F.addClass(el,args.invalidClass);
+                }
+            } else if(el.validity.valueMissing) {
+                H5F.removeClass(el,[args.requiredClass,args.invalidClass,args.validClass]);
+            }
+            if(curEvt === "input" && checkForm) {
+                // If input is triggered remove the keyup event
+                H5F.unlisten(el.form,"keyup",H5F.checkField,true);
+                checkForm = false;
+            }
+        }
     };
     H5F.checkValidity = function (el) {
         var f, ff, isRequired, hasPattern, invalid = false;
@@ -164,17 +164,17 @@ var H5F = H5F || {};
             return false;
         } else {
             var placeholder = el.getAttribute("placeholder"),
-				val = el.value;
-			
-			usrPatt = new RegExp(type);
-			
-			if(val === placeholder) {	
-				return true;
-			} else if(val === "") {
-				return false;
-			} else {
-				return !usrPatt.test(el.value);
-			}
+                val = el.value;
+            
+            usrPatt = new RegExp(type);
+            
+            if(val === placeholder) {    
+                return true;
+            } else if(val === "") {
+                return false;
+            } else {
+                return !usrPatt.test(el.value);
+            }
         }
     };
     H5F.placeholder = function(el) {
@@ -239,7 +239,7 @@ var H5F = H5F || {};
             node.attachEvent( "on" + type, fn );
         }
     };
-	H5F.unlisten = function (node,type,fn,capture) {
+    H5F.unlisten = function (node,type,fn,capture) {
         if(H5F.isHostMethod(window,"removeEventListener")) {
             /* FF & Other Browsers */
             node.removeEventListener( type, fn, capture );