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:09] – [Form Validation] eechris
@@ Line 267: / Line 267: @@
   * avoids a trip to server that would result in an error page
   * error handling is kept local
-  * usually triggered by //submission// button
+  * usually triggered by //submission// button((form's ''onsubmit'' event))
   * error message generated locally by writing into document object.
   * This example defines a function that could be used in a registration page to check that a phone number is valid (using US conventions!) HTML5 Markup: [[/eg-259/examples/lecture7/forms_check.html|forms_check.html]] Script: [[/eg-259/examples/lecture7/forms_check.js|forms_check.js]]
@@ Line 287: / Line 287: @@
   </head>
   <body>
+    <h1>Phone Number Tester</h1>
     :
-    <form id="phone" method="post" action="http://eng-hope.swan.ac.uk/cgi-bin/echo_form.cgi">
+    <form id="phone" method="post" action="http://eng-hope.swan.ac.uk/cgi-bin/echo_form.cgi"
+          onsubmit="validate()">
       <label for="phone_number">Phone number: </label>
       <input id="phone_number" type="text" name="phone_number" placeholder="444-4444"
-             title="Please enter phone number using the pattern ddd-dddd." />
+              title="Please enter phone number using the pattern ddd-dddd."/>
-      <input type="submit" onclick="return validate();" name="Submit" value="Submit" />
+      <input type="submit" name="Submit" value="Submit" />
     </form>
-    <!-- Best practice guidelines suggest that you load scripts first -->
+    <!-- Best practice guidelines suggest that you load scripts last -->
     <script src="forms_check.js"></script>
   </body>
@@ Line 382: / Line 384: @@
   </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 405: @@
 </html>
 </code>
 ===== Debugging JavaScript: IE6+ =====