ICCT Wiki

User Tools

Site Tools

Trace:
eg-259:lecture7

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Next revisionBoth sides next revision
eg-259:lecture7 [2012/02/20 17:12] – eechriseg-259:lecture7 [2013/02/12 20:10] – [Form Validation] eechris
Line 9: Line 9:
 ====== Text Processing with Regular Expressions ====== ====== 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]]. **Lecturer**: [[C.P.Jobling@Swansea.ac.uk|Dr Chris P. Jobling]].
Line 104: Line 104:
   * There's another slightly more powerful one, a [[http://www.cuneytyilmaz.com/prog/jrx/|clever piece]] of JavaScript ((See http://www.cuneytyilmaz.com/prog/jrx/ for original version.)) magic was developed by Cüneyt Yýlmaz    * There's another slightly more powerful one, a [[http://www.cuneytyilmaz.com/prog/jrx/|clever piece]] of JavaScript ((See http://www.cuneytyilmaz.com/prog/jrx/ for original version.)) magic was developed by Cüneyt Yýlmaz 
   * You can use either of these tools to play with regular expressions.   * You can use either of these tools to play with regular expressions.
 +  * Here's the [[/eg-259/examples/lecture7/cheat.html|set of examples]] that I will work through((We won't have time for them all, but you can look at them yourself later)).
  
 ---- ----
Line 266: Line 267:
   * avoids a trip to server that would result in an error page    * avoids a trip to server that would result in an error page 
   * error handling is kept local    * 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.    * 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 286: Line 287:
   </head>   </head>
   <body>   <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>       <label for="phone_number">Phone number: </label>
-      <input id="phone_number" type="text" name="phone_number" placeholder="444-4444" /> +      <input id="phone_number" type="text" name="phone_number" placeholder="444-4444"  
-      <input type="submit" onclick="return validate();" name="Submit" value="Submit" />+              title="Please enter phone number using the pattern ddd-dddd."/> 
 +      <input type="submit" name="Submit" value="Submit" />
     </form>     </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>     <script src="forms_check.js"></script>
   </body>   </body>
Line 355: Line 359:
   * E.g.    * E.g. 
 <code javascript> <code javascript>
-<input id="phone_number" type="text" name="phone_number" placeholder="444-4444" pattern="\d{3}-\d{4}" />+<input id="phone_number" type="text" name="phone_number"  
 +       placeholder="444-4444" pattern="\d{3}-\d{4}" />
 </code>  </code> 
 <html> <html>
Line 363: Line 368:
 ===== HTML5 Version of the Phone Number Validator ===== ===== 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 369: Line 374:
 <code html> <code html>
 <!DOCTYPE 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>   <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>     <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>   </head>
   <body>   <body>
-     +    <div class="container"> 
-    <form id="phone" method="post" action="http://eng-hope.swan.ac.uk/cgi-bin/echo_form.cgi"> +      <h1>Phone Number Tester (HTML5)</h1> 
-      <label for="phone_number">Phone number: </label> +      <p>An example of the use of Regular Expressions for form validation. View source to see the code.</p> 
-      <input id="phone_number" type="text" name="phone_number"  +      <p>Phone numbers should match the pattern 3 digits followed by a dash followed by four digits. The regular expression for this is 
-             pattern="\d{3}-\d{4}" placeholder="444-4444" /> +        <code>/\d{3}-\d{4}/</code>. 
-      <!-- No need for onclick validator now --> +      </p> 
-      <input type="submit" name="Submit" value="Submit" /> +      <p>HTML5 provides a new form attribute <em>pattern</em> whose value is a regular expression (without the slashes). When supported, 
-    </form> +        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://www.cpjobling.me/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."/> 
 +        <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! -->     <!-- Look no scripts! -->
   </body>   </body>
 </html> </html>
 </code> </code>
- 
 ===== Debugging JavaScript: IE6+ ===== ===== Debugging JavaScript: IE6+ =====
  
eg-259/lecture7.txt · Last modified: 2013/02/19 12:29 by eechris