Differences

This shows you the differences between two versions of the page.

--- eg-259:lecture7 [2012/02/21 09:07] – [Form Validation] eechris
+++ eg-259:lecture7 [2012/02/22 12:06] – [HTML5 Version of the Phone Number Validator] eechris
@@ Line 382: / Line 382: @@
   </head>
   <body>
-    :
+    <h1>Phone Number Tester (HTML5)</h1>
+    <p>An example of the use of Regular Expressions for form validation. View source to see the code.</p>
+    <p>Phone numbers should match the pattern 3 digits followed by a dash followed by four digits. The regular expression for this is
+      <code>/\d{3}-\d{4}/</code>.
+    </p>
+    <p>HTML5 provides a new form attribute <em>pattern</em> whose value is a regular expression (without the slashes). When supported,
+      this can be used instead of JavaScript for form validation.</p>
+    <p>In production, you would normally need to provide a JavaScript fallback for browsers that don't yet support the <em>pattern</em> attribute.</p>
+    <!-- No need for onsubmit validator now -->
     <form id="phone" method="post" action="http://eng-hope.swan.ac.uk/cgi-bin/echo_form.cgi">
       <label for="phone_number">Phone number: </label>
       <input id="phone_number" type="text" name="phone_number"
              pattern="\d{3}-\d{4}" placeholder="444-4444"
-             title="Please enter phone number using the pattern ddd-dddd." />
+             title="Please enter phone number using the pattern ddd-dddd."/>
-      <!-- No need for onclick validator now -->
       <input type="submit" name="Submit" value="Submit" />
     </form>
@@ Line 396: / Line 403: @@
 </html>
 </code>
 ===== Debugging JavaScript: IE6+ =====