diff --git a/shared/.DS_Store b/shared/.DS_Store
index 6aa5def..1d5b230 100644
Binary files a/shared/.DS_Store and b/shared/.DS_Store differ
diff --git a/shared/js/weston.ruter.net/webforms2/webforms2_src.js b/shared/js/weston.ruter.net/webforms2/webforms2_src.js
index 98b9b91..7938b4f 100644
--- a/shared/js/weston.ruter.net/webforms2/webforms2_src.js
+++ b/shared/js/weston.ruter.net/webforms2/webforms2_src.js
@@ -463,11 +463,9 @@ $wf2 = {
 		parent = (parent || document.documentElement);
 		var i,j, frm, frms = parent.getElementsByTagName('form');
 		for(i = 0; frm = frms[i]; i++){
-			
 			if(frm.checkValidity && !$wf2.hasBadImplementation && $wf2.getAttributeValue(frm, 'data-webforms2-force-js-validation') != 'true') {
 				continue;
 			}
-			
 			frm.checkValidity = $wf2.formCheckValidity;
 			
 			if(frm.addEventListener)
@@ -771,6 +769,15 @@ $wf2 = {
 	
 	//This function is called "live" 
 	updateValidityState : function(node){
+		
+		var customErrorMessage = $wf2.getAttributeValue(node, 'data-errormessage');
+		var isCustomErrorMessageSet = (customErrorMessage == node.validationMessage);
+		
+		if (isCustomErrorMessageSet) {
+			node.validationMessage = '';
+		}
+		
+		
 		//if(node.form && node.form[node.name] && node.form[node.name].wf2HasInvalidIndicator)
 		//	return;
 		var type = (node.getAttribute('type') ? node.getAttribute('type').toLowerCase() : node.type);
@@ -1156,6 +1163,11 @@ $wf2 = {
 			//node.className = node.className.replace(/\s?wf2_valid/g, "") + ' wf2_invalid';
 			//console.log('not valid: ', node.className, 'value:', node.value, 'wtfValue:', node.wf2Value)
 		}
+		if (isCustomErrorMessageSet) {
+			node.validationMessage = customErrorMessage;
+		}
+		
+		
 		//This is now done onmousedown or onkeydown, just as Opera does
 		//if(node.validity.valid){
 		//	node.className = node.className.replace(/\s*\binvalid\b\s*/g, " "); //substitute for :invalid pseudo class
diff --git a/tests/html5Forms/autofocus.html b/tests/html5Forms/autofocus.html
index 163bb58..da7bae8 100644
--- a/tests/html5Forms/autofocus.html
+++ b/tests/html5Forms/autofocus.html
@@ -63,9 +63,9 @@
 				<tr>
 					<th>Zip Code</th>
 					<td><input type="text" name="postalCode" value="" required="required" 
-						pattern="(\d{5}([\-]\d{4})?)" data-errormessage="This must be a valid postal code."
+						pattern="(\d{5}([\-]\d{4})?)" data-errormessage="This must be a valid zip code."
 					/>
-					<div class="description">Please enter a valid American postal code. 
+					<div class="description">Please enter a valid American zip code. 
 					Valid format is <strong>nnnnn</strong> or <strong>nnnnn-nnnn</strong>
 					where <strong>n</strong>
 					is a numeric digit.</div>
diff --git a/tests/html5Forms/css/basicForm.css b/tests/html5Forms/css/basicForm.css
index 1db0fe1..cf3e80a 100644
--- a/tests/html5Forms/css/basicForm.css
+++ b/tests/html5Forms/css/basicForm.css
@@ -1,4 +1,4 @@
-
+@import url("http://www.useragentman.com/shared/css/useragentmanExample.css");
 body {
 	font-family: "Arial", sans-serif;
 }
diff --git a/tests/html5Forms/css/validity.css b/tests/html5Forms/css/validity.css
new file mode 100644
index 0000000..7b083a0
--- /dev/null
+++ b/tests/html5Forms/css/validity.css
@@ -0,0 +1,48 @@
+/*
+ * STEP 1: Show the user when a form field is required with an orange star.
+ */
+
+/* Browsers that implement HTML5 Forms Natively */
+input:required, textarea:required{
+	background:url("../images/asterisk_orange.png") no-repeat right top;
+}
+
+/* Polyfill */
+input[required] {
+	background:url("../images/asterisk_orange.png") no-repeat right top;
+}
+
+
+
+/*
+ * STEP 2: Show the user when a form field has valid data in it with a green checkmark.
+ */
+
+/* Browsers that implement HTML5 Forms Natively */
+input[required]:valid, textarea[required]:valid {
+	/* Make this important if you want IE10 to work right. */
+	background:url("../images/tick.png") no-repeat right top !important;
+}
+
+/* Polyfill */
+input[required].wf2_valid {
+	background:url("../images/tick.png") no-repeat right top;
+}
+
+
+
+
+/*
+ * STEP 3: Show the user when a form field has invalid data in it with a red 'X'.
+ */
+
+/* Browsers that implement HTML5 Forms Natively */
+input:focus:invalid, textarea:focus:invalid {
+	background:url("../images/cancel.png") no-repeat right top;
+}
+
+/* Polyfill */
+input.wf2_invalid:focus {
+	background:url("../images/cancel.png") no-repeat right top;
+}
+
diff --git a/tests/html5Forms/example.html b/tests/html5Forms/example.html
index cb145dc..faf7b77 100644
--- a/tests/html5Forms/example.html
+++ b/tests/html5Forms/example.html
@@ -11,8 +11,10 @@
 		<link type="text/css" rel="stylesheet" href="../../shared/css/useragentmanExample.css">
 		
 		
-		<link type="text/css" rel="stylesheet" href="css/form.css" />
+		<link type="text/css" rel="stylesheet" href="css/basicForm.css" />
 		
+		<!-- This style sheet can be used as a basis to create validation-state styles -->
+		<link type="text/css" rel="stylesheet" href="css/validity.css" />
 		
        <!-- Needed for Forms Feature Detection -->
 		<script type="text/javascript" src="../../shared/js/modernizr.com/Modernizr-2.5.3.forms.js">
@@ -38,12 +40,12 @@
         	
 			<fieldset>
 				<legend>HTML5Widgets Test Form</legend>
-				<p>Form fields labelled <img src="images/asterix.gif" alt="*"/> are mandatory</p>
+				<p>Form fields labelled <img src="images/asterisk_orange.png" alt="*"/> are mandatory.</p>
             <table class="formTable">
                 <tbody>
                 	<tr>
                 		<th>Legal Name:</th>
-						<td><input type="text" name="name" value="" autofocus="autofocus" />
+						<td><input type="text" name="name" value="" autofocus="autofocus" required="required" />
 						<div class="description">This field has focus when the page
 						first loads because it has it's <code>autofocus</code>
 						attribute set to <code>true</code>.
@@ -52,7 +54,7 @@
 					
                 	<tr>
                 		<th>Company Name:</th>
-						<td><input type="text" name="placeholderEl" value=""
+						<td><input type="text" name="placeholderEl" value="" required="required"
 						placeholder="Leave blank if unemployed" />
 						<div class="description">This field has it's 
 						<code>placeholder</code> attribute set to 
@@ -69,7 +71,7 @@
                         <output class="withRange" onforminput="this.value = parseInt(rangeEl.value)" 
 							>-</output>	
 							
-						<input type="range"  name="rangeEl" value="" 
+						<input type="range"  name="rangeEl" value=""
                         min="0" max="150" class="range" />
 						
 						
@@ -81,7 +83,7 @@
                     <tr>
                         <th>Date/Time (Local)</th>
 
-                        <td><input type="datetime-local" name="DateTimeLocalTest" value=
+                        <td><input type="datetime-local" name="DateTimeLocalTest" required="required" value=
                         "">
 						<div class="description">The <code>datetime</code>,
 						<code>date</code>, <code>week</code> and <code>month</code>
@@ -96,7 +98,7 @@
 					<tr>
                         <th>Date/Time (UTC)</th>
 
-                        <td><input type="datetime" name="DateTimeTest" value=
+                        <td><input type="datetime" name="DateTimeTest" required="required" value=
                         "">
 						<div class="description">The <code>datetime</code>,
 						<code>date</code>, <code>week</code> and <code>month</code>
@@ -111,21 +113,21 @@
                     <tr>
                         <th>Date</th>
 
-                        <td><input type="date" name="DateTest" value=
+                        <td><input type="date" name="DateTest" required="required" value=
                         ""></td>
                     </tr>
 
                     <tr>
                         <th>Month</th>
 
-                        <td><input type="month" name="MonthTest" value=
+                        <td><input type="month" name="MonthTest" required="required" value=
                         ""></td>
                     </tr>
 
                     <tr>
                         <th>Week</th>
 
-                        <td><input type="week" name="WeekTest" value=
+                        <td><input type="week" name="WeekTest" required="required" value=
                         ""></td>
                     </tr>
 
@@ -135,7 +137,7 @@
                     <tr>
                         <th>Colour</th>
 
-                        <td><input type="color" name="ColorTest" value=
+                        <td><input type="color" name="ColorTest" required="required" value=
                         "" ></td>
                     </tr>
 					
diff --git a/tests/html5Forms/index.html b/tests/html5Forms/index.html
index e4cf183..d953b68 100644
--- a/tests/html5Forms/index.html
+++ b/tests/html5Forms/index.html
@@ -22,6 +22,8 @@
 					<li><a href="datetime.html">the various <code>date</code> related widgets</a></li>
 						<li><a href="outputWithOninput.html"><code>output</code> tag with <code>oninput</code> event</a></li>
 					<li><a href="color.html"><code>color</code> example</a></li>
+					<li><a href="errorMessageStyling.html">Error message styling example.</a></li>
+					<li><a href="validityStyling.html">Styling of the validation state of a form field</a> (i.e. <code>:on_valid</code>, <code>:on_invalid</code>)</li>
 					<li><a href="example.html">And now ... everything together.</a></li>
 				</ul>
 				
diff --git a/tests/html5Forms/patternRequired-styleError.html b/tests/html5Forms/patternRequired-styleError.html
index 3dcc293..4aaf74e 100644
--- a/tests/html5Forms/patternRequired-styleError.html
+++ b/tests/html5Forms/patternRequired-styleError.html
@@ -64,7 +64,7 @@
 					<td><input type="text" name="postalCode" value="" required="required" 
 						pattern="(\d{5}([\-]\d{4})?)"
 					/>
-					<div class="description">Please enter a valid American postal code. 
+					<div class="description">Please enter a valid American zip code. 
 					Valid format is <strong>nnnnn</strong> or <strong>nnnnn-nnnn</strong>
 					where <strong>n</strong>
 					is a numeric digit.</div>
diff --git a/tests/html5Forms/patternRequired.html b/tests/html5Forms/patternRequired.html
index 72e8262..fa6fd19 100644
--- a/tests/html5Forms/patternRequired.html
+++ b/tests/html5Forms/patternRequired.html
@@ -58,9 +58,9 @@
 				<tr>
 					<th>Zip Code</th>
 					<td><input type="text" name="postalCode" value="" required="required" 
-						pattern="(\d{5}([\-]\d{4})?)" data-errormessage="This must be a valid postal code."
+						pattern="(\d{5}([\-]\d{4})?)" data-errormessage="This must be a valid zip code."
 					/>
-					<div class="description">Please enter a valid American postal code. 
+					<div class="description">Please enter a valid American zip code. 
 					Valid format is <strong>nnnnn</strong> or <strong>nnnnn-nnnn</strong>
 					where <strong>n</strong>
 					is a numeric digit.</div>
diff --git a/tests/html5Forms/patternRequiredWithVisibleIf.html b/tests/html5Forms/patternRequiredWithVisibleIf.html
index e218ffd..5e4e995 100644
--- a/tests/html5Forms/patternRequiredWithVisibleIf.html
+++ b/tests/html5Forms/patternRequiredWithVisibleIf.html
@@ -31,7 +31,7 @@
 				<code>required</code> and <code>validate</code> attributes that also uses 
 				<a href="/2010/06/20/visibleif-html5-custom-data-attributes-with-javascript-make-dynamic-interactive-forms/"><code>visibleIf</code></a>
 				to dynamically hide and show form fields according to other form
-				field values (in this case, the form will show a postal code 
+				field values (in this case, the form will show a Postal Code 
 				field if the country chosen	is Canada, or a zip code field if the country chosen is the United States.  Note that the validation only happens on those fields that 
 				are visible, since the <code>visibleIf</code> library sets them to be <code>disabled</code>, which prevents validation. 
 					<a href="http://www.useragentman.com/blog/?p=1110">Back to User Agent Man HTML5 Forms article </a>
@@ -82,7 +82,7 @@
 					<td>
 						<input type="text" name="postalCode" value="" required="required" 
 						pattern="[A-Za-z]\d[A-Za-z])\ {0,1}(\d[A-Za-z]\d" />
-						<div class="description">Please enter a valid Canadian postal code.
+						<div class="description">Please enter a valid Canadian Postal Code.
 						Valid format is <strong>H0H 0H0</strong> where <strong>H</strong>
 						is a letter and <strong>0</strong> is a number.</div>
 					
@@ -93,7 +93,7 @@
 					<td><input type="text" name="postalCode" value="" required="required" 
 						pattern="(\d{5}([\-]\d{4})?)"
 					/>
-					<div class="description">Please enter a valid American postal code. 
+					<div class="description">Please enter a valid American Postal Code. 
 					Valid format is <strong>nnnnn</strong> or <strong>nnnnn-nnnn</strong>
 					where <strong>n</strong> is a numeric digit.</div>
 					
diff --git a/tests/html5Forms/placeholder.html b/tests/html5Forms/placeholder.html
index 02c0da9..43d2b78 100644
--- a/tests/html5Forms/placeholder.html
+++ b/tests/html5Forms/placeholder.html
@@ -66,9 +66,9 @@
 				<tr>
 					<th>Zip Code</th>
 					<td><input type="text" name="postalCode" value="" required="required" 
-						pattern="(\d{5}([\-]\d{4})?)" data-errormessage="This must be a valid postal code."
+						pattern="(\d{5}([\-]\d{4})?)" data-errormessage="This must be a valid zip code."
 					/>
-					<div class="description">Please enter a valid American postal code. 
+					<div class="description">Please enter a valid American zip code. 
 					Valid format is <strong>nnnnn</strong> or <strong>nnnnn-nnnn</strong>
 					where <strong>n</strong>
 					is a numeric digit.</div>
diff --git a/tests/html5Forms/range.html b/tests/html5Forms/range.html
index 62c3bed..99bbbc2 100644
--- a/tests/html5Forms/range.html
+++ b/tests/html5Forms/range.html
@@ -34,7 +34,7 @@
 		
 		
 		<form oninput="document.getElementById('rangeOutput').innerHTML = 
-			'$' + document.getElementById('rangeEl').value">
+			'$' + document.getElementById('rangeEl').value" action="http://www.useragentman.com/testForm.php">
 			<fieldset>
 				<legend>Personal Information</legend>
 		
@@ -80,9 +80,9 @@
 				<tr>
 					<th>Zip Code</th>
 					<td><input type="text" name="postalCode" value="" required="required" 
-						pattern="(\d{5}([\-]\d{4})?)" data-errormessage="This must be a valid postal code."
+						pattern="(\d{5}([\-]\d{4})?)" data-errormessage="This must be a valid zip code."
 					/>
-					<div class="description">Please enter a valid American postal code. 
+					<div class="description">Please enter a valid American zip code. 
 					Valid format is <strong>nnnnn</strong> or <strong>nnnnn-nnnn</strong>
 					where <strong>n</strong>
 					is a numeric digit.</div>
diff --git a/tests/html5Forms/styleValidation.html b/tests/html5Forms/styleValidation.html
deleted file mode 100644
index 7010f38..0000000
--- a/tests/html5Forms/styleValidation.html
+++ /dev/null
@@ -1,109 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta name="generator" content="HTML Tidy, see www.w3.org">
-        <meta http-equiv="Content-Type" content=
-        "text/html; utf-8">
-
-        <title>html5Widgets Test Form</title>
-		
-		<!-- This CSS file is not necessary to use html5Widgets -->
-		<link type="text/css" rel="stylesheet" href="../../shared/css/useragentmanExample.css">
-		
-		
-       
-		<link type="text/css" rel="stylesheet" href="css/form.css" />
-		
-		
-		
-		
-		
-
-        <!-- Needed for Validation --> 
-		<script type="text/javascript" src="../../shared/js/weston.ruter.net/webforms2/webforms2_src.js">
-		</script>
-		
-		<!-- What glues all the above together -->
-		
-		<script type="text/javascript" src="../../shared/js/modernizr.com/Modernizr-2.5.3.forms.js">
-		</script>
-
-		<script type="text/javascript" src="../../shared/js/html5.js">
-		</script>
-		
-		
-		<script type="text/javascript" src="../../shared/js/EventHelpers.js">
-		</script>
-		
-		<script type="text/javascript" src="../../shared/js/html5Widgets.js">
-		</script>
-		
-	
-		
-
-    </head>
-
-    <body id="myExample" class="html5Widgets-debug">
-    	<div id="exampleBlurb">
-    		<p>The following shows a variety of HTML5 form elements, including 
-			<code>color</code>.  The form uses <code>HTML5Widgets</code> and
-			Weston Ruter's  <code>webforms2</code> to add HTML5 Forms support to 
-			browsers that don't currently support it.  Browsers that partially
-			support the specification will use native functionality where applicable.
-			<a href="http://www.useragentman.com/blog/?p=1110">Back to User Agent Man HTML5 Forms article </a></p>
-
-    	</div>
-		
-        <form method="get" action="http://www.useragentman.com/testForm.php" >
-        	
-			<fieldset>
-				<legend>HTML5Widgets Test Form</legend>
-				<p>Form fields labelled <img src="images/asterix.gif" alt="*"/> are mandatory</p>
-            <table class="formTable">
-                <tbody>
-
-                	
-					
-					<tr>
-						<th>Test validity</th>
-						<td><input type="text" name="safasfas" value="" pattern="[0-9]*" required="required" placeholder="Required Field" />
-						<div class="description">To test the <strong>required</strong> and <strong>pattern</strong>
-						attributes, this field only accepts numbers.</div>
-
-						
-						</td>
-					</tr>
-					
-					<tr>
-						<th>Terms and Conditions:</th>
-						<td>
-							I promise to give my first born to The Evil Corporation
-							in return for a free iPad.
-							<br />
-							<br />
-							<label><input type="checkbox" class="check" name="iAgree" value="yesDammitYes" required="required"  />I submit to my new evil overlord</label>
-
-							
-						
-						</td>
-						
-					</tr>
-					<tr>
-						<th></th>
-						<td >
-							<input type="submit" name="submit me" value="Submit" />
-						</td>
-					</tr>
-					
-                </tbody>
-
-            </table>
-            </fieldset>
-        </form>
-		
-		<div id="supports">
-			
-		</div>
-    </body>
-</html>
-
diff --git a/tests/html5Forms/validityStyling.html b/tests/html5Forms/validityStyling.html
index 5d4d66f..c4d0263 100644
--- a/tests/html5Forms/validityStyling.html
+++ b/tests/html5Forms/validityStyling.html
@@ -5,64 +5,9 @@
 		
 		<link type="text/css" rel="stylesheet" href="css/basicForm.css" />
 		
-		<style type="text/css">
-		<!--
+		<!-- This style sheet can be used as a basis to create validation-state styles -->
+		<link type="text/css" rel="stylesheet" href="css/validity.css" />
 		
-		input:focus, textarea:focus {
-			-webkit-box-shadow:0 0 25px #ccc;
-			-moz-box-shadow:0 0 25px #ccc;
-			box-shadow:0 0 25px #ccc;
-			
-			-webkit-transform: scale(1.05);
-			-moz-transform: scale(1.05);
-			-ms-transform: scale(1.05);
-			-o-transform: scale(1.05);
-			transform: scale(1.05);
-		}
-		
-		input[type="number"]:focus {
-			-o-transform: none !important;
-		}
-		
-		/* The interesting bit */
-		
-		input:not(:focus), textarea:not(:focus) {
-			opacity:0.5;
-		}
-		
-		input:required, textarea:required{
-			background:url("images/asterisk_orange.png") no-repeat right 0px;						
-		}
-		
-		[required] {
-			background:url("images/asterisk_orange.png") no-repeat right 0px;		
-		}
-
-		input:valid, textarea:valid {
-			/* Make this important if you want IE10 to work right. */
-			background:url("images/tick.png") no-repeat right 0px !important;			
-		}
-		
-		.wf2_valid {
-			background:url("images/tick.png") no-repeat right 0px;			
-		}		
-
-		input:focus:invalid, textarea:focus:invalid {
-			background:url("images/cancel.png") no-repeat right 0px;						
-		}
-		
-		input.wf2_invalid:focus {
-			background:url("images/cancel.png") no-repeat right 0px;						
-		}
-
-		input[type=submit] {
-			padding:10px;
-			background:none !important;
-			opacity:1.0;
-		}
-		
-		-->
-		</style>
 		<script type="text/javascript" src="../../shared/js/modernizr.com/Modernizr-2.5.3.forms.js">
 		</script>
 		
@@ -86,18 +31,18 @@
 		</div>
 		
 		
-		<form >
+		<form action="http://www.useragentman.com/testForm.php">
 			<fieldset>
 				<legend>Personal Information</legend>
 		
-				<p>It is important you fill out <strong>all</strong> of the information in this form.</p>
+				<p>Form fields labelled <img src="images/asterisk_orange.png" alt="*"/> are mandatory.</p>
 				
 			<table class="formTable">
 				<tr>
 					<th>Full Name :</th>
 					<td><input type="text" name="fullName" value="" required="required" placeholder="Required information" 
-						oninvalid="this.setCustomValidity('Yo, Bro! You forgot to fill out this field!')" 
-						onkeydown="this.setCustomValidity('');"/>
+						data-errormessage="Yo, Bro! You forgot to fill out this field!"
+						/>
 					<div class="description"></div>
 					</td>
 				</tr>
@@ -105,19 +50,28 @@
 				<tr>
 					<th>Company Name :</th>
 					<td><input type="text" name="companyName" required="required" value="" 
-						oninvalid="this.setCustomValidity('Don\'t forget this field either, Holmes!')"
-						onkeydown="this.setCustomValidity('');"
+						data-errormessage="Don't forget this field either, Holmes!"
+						
 						 />
 					<div class="description"></div>
 					</td>
 				</tr>
-				
+				<tr>
+					<th>Zip Code</th>
+					<td><input type="text" name="postalCode" value="" required="required" placeholder="e.g. 90210"
+						pattern="(\d{5}([\-]\d{4})?)" data-errormessage="This must be a valid zip code."
+					/>
+					
+					
+					
+					</td>
+				</tr>
 				
 				
 				
 				<tr>
 					<td></td>
-					<td><input type="submit" value="Submit Information"/></td>
+					<td><input type="submit" name="submit" value="Submit Information"/></td>
 				</tr>
 			</table>
 			</fieldset>
