Differences

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

--- eg-259:lecture7 [2012/02/22 12:06] – [HTML5 Version of the Phone Number Validator] 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>