Differences

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

--- eg-259:lecture7 [2013/02/12 20:06] – [HTML5 Version of the Phone Number Validator] eechris
+++ eg-259:lecture7 [2013/02/12 20:11] – [Form Validation] eechris
@@ Line 269: / Line 269: @@
   * 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 280: / Line 280: @@
 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 </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</h1>
+    <div class="container">
-    :
+      <h1>Phone Number Tester</h1>
-    <form id="phone" method="post" action="http://eng-hope.swan.ac.uk/cgi-bin/echo_form.cgi"
-          onsubmit="validate()">
+      <p>An example of the use of Regular Expressions for form validation.
-      <label for="phone_number">Phone number: </label>
+         View source to see the HTML code and use your browser's development tools to view the JavaScript.</p>
-      <input id="phone_number" type="text" name="phone_number" placeholder="444-4444"
+      <p>Phone numbers should match the pattern 3 digits followed by a dash followed by four
-              title="Please enter phone number using the pattern ddd-dddd."/>
+         digits. The regular expression for this is <code>/\d{3}-\d{4}/</code>.
-      <input type="submit" name="Submit" value="Submit" />
+      </p>
-    </form>
+      <p>The example uses the DOM 0 event model which will be discussed in the next session.</p>
+      <form id="phone" method="post" action="/cgi-bin/echo_form.cgi" onsubmit="validate();">
-    <!-- Best practice guidelines suggest that you load scripts last -->
+        <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."/>
+        <input type="submit" name="Submit" value="Submit" />
+      </form>
+    </div> <!-- /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>
+    <!-- The actual forms_check script -->
     <script src="forms_check.js"></script>
   </body>
@@ Line 311: / Line 331: @@
  */
-function tst_phone_num(num) {
+function test_phone_number(num) {
   // Use a simple pattern to check the number of digits and the dash
@@ Line 317: / Line 337: @@
   var ok = num.search(/\d{3}-\d{4}/);
-  if(ok == 0)
+  if (ok === 0) {
     return true;
-  else
+  }
+  else {
     return false;
+  }
 }// end of function tst_phone_num
 /* Actual form validation. Called onclick */
-var validate = function () {
+var validate = function() {
   var phoneNumber = document.getElementById("phone_number");
-  if(tst_phone_num(phoneNumber.value)) {
+  if (test_phone_number(phoneNumber.value)) {
     return true;
   } else {
     alert("Phone number is invalid. Please use format ddd-dddd.");
+    // prevent submission
     return false;
-    // prevents submission
   }
 };
@@ Line 339: / Line 361: @@
 Test code for ''tst_phone_num''
 <code javascript>
-// Test tst_phone_num -- commented out in production
+// Test test_phone_number
-tests = ["444-5432", "444-r432", "44-1234"]
+var test_phone_number_test = function() {
-for( i = 0; i < tests.length; i++) {
+  var tests = ["444-5432", "444-r432", "44-1234"];
-  var tst = tst_phone_num(tests[i]);
+  for (i = 0; i < tests.length; i++) {
-  if(tst) {
+    var test = test_phone_number(tests[i]);
-    console.log(tests[i] + " is a legal phone number <br />");
+    if (test) {
-  } else {
+      console.log(tests[i] + " is a legal phone number <br />");
-    console.error("Error in tst_phone_num: " + tests[i] + " is not a legal phone number <br />");
+    } else {
+      console.error("Error in test_phone_number: " + tests[i] + " is not a legal phone number <br />");
+    }
   }
-}
+};
 </code>
 ===== HTML5 Pattern Attribute =====