Differences

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

--- eg-259:lecture7 [2012/02/22 12:07] – [Form Validation] eechris
+++ eg-259:lecture7 [2013/02/12 20:10] – [Form Validation] eechris
@@ Line 9: / Line 9: @@
 ====== Text Processing with Regular Expressions ======
-**Contact Hour 10**: To be discussed on Tuesday 21st February, 2012.
+**Contact Hour 10**: To be discussed on Tuesday 19th February, 2013.
 **Lecturer**: [[C.P.Jobling@Swansea.ac.uk|Dr Chris P. Jobling]].
@@ 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]]
+  * 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: [[http://jsfiddle.net/cpjobling/rwcce/2/|fiddle with it]] [[http://localhost:4567/eg-259/examples/lecture7/forms_check.html|forms_check.html]] Script: [[http://localhost:4567/eg-259/examples/lecture7/forms_check.js|forms_check.js]]
 ----
@@ Line 368: / Line 368: @@
 ===== HTML5 Version of the Phone Number Validator =====
-  * [[/eg-259/examples/lecture7/forms_check_html5.html|forms_check_html5.html]]
+  * [[http://localhost:4567/eg-259/examples/lecture7/forms_check_html5.html|forms_check_html5.html]]
 ----
@@ Line 374: / Line 374: @@
 <code html>
 <!DOCTYPE html>
-<!-- forms_check_html5.html
+<!-- forms_check.html
-Uses the new HTML5 pattern attribute
+A function tst_phone_num is defined and tested.
-to validate phone number
+This function checks the validity of phone
--->
+number input from a form
-<html lang="en">
+-->
+<html class="no-js" lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title> Phone number tester (HTML5)</title>
+    <meta name="viewport" content="width=device-width">
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
+    <link rel="stylesheet" href="css/main.css">
+    <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
   </head>
   <body>
-    <h1>Phone Number Tester (HTML5)</h1>
+    <div class="container">
-    <p>An example of the use of Regular Expressions for form validation. View source to see the code.</p>
+      <h1>Phone Number Tester (HTML5)</h1>
-    <p>Phone numbers should match the pattern 3 digits followed by a dash followed by four digits. The regular expression for this is
+      <p>An example of the use of Regular Expressions for form validation. View source to see the code.</p>
-      <code>/\d{3}-\d{4}/</code>.
+      <p>Phone numbers should match the pattern 3 digits followed by a dash followed by four digits. The regular expression for this is
-    </p>
+        <code>/\d{3}-\d{4}/</code>.
-    <p>HTML5 provides a new form attribute <em>pattern</em> whose value is a regular expression (without the slashes). When supported,
+      </p>
-      this can be used instead of JavaScript for form validation.</p>
+      <p>HTML5 provides a new form attribute <em>pattern</em> whose value is a regular expression (without the slashes). When supported,
-    <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>
+        this can be used instead of JavaScript for form validation.</p>
-    <!-- No need for onsubmit validator now -->
+      <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>
-    <form id="phone" method="post" action="http://eng-hope.swan.ac.uk/cgi-bin/echo_form.cgi">
+      <!-- No need for onsubmit validator now -->
-      <label for="phone_number">Phone number: </label>
+      <form id="phone" method="post" action="http://www.cpjobling.me/cgi-bin/echo_form.cgi">
-      <input id="phone_number" type="text" name="phone_number"
+        <label for="phone_number">Phone number: </label>
-             pattern="\d{3}-\d{4}" placeholder="444-4444"
+        <input id="phone_number" type="text" name="phone_number"
-             title="Please enter phone number using the pattern ddd-dddd."/>
+               pattern="\d{3}-\d{4}" placeholder="444-4444"
-      <input type="submit" name="Submit" value="Submit" />
+               title="Please enter phone number using the pattern ddd-dddd."/>
-    </form>
+        <input type="submit" name="Submit" value="Submit" />
+      </form>
+    </div> <!-- end of container -->
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
+    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
+    <script src="js/vendor/bootstrap.min.js"></script>
+    <script src="js/plugins.js"></script>
     <!-- Look no scripts! -->
   </body>