- Fix css validation state bug in IE.

- Fix layout of examples.
zoltan-dulac · May 17, 2012 · 04c2cd6 · 04c2cd6
1 parent b982e2d
commit 04c2cd6
Show file tree

Hide file tree

Showing 14 changed files with 110 additions and 201 deletions.
diff --git a/shared/.DS_Store b/shared/.DS_Store
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>