eg-259:lecture7
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| eg-259:lecture7 [2012/02/21 09:06] – [Form Validation] eechris | eg-259:lecture7 [2013/02/19 12:29] (current) – [Demo] eechris | ||
|---|---|---|---|
| Line 9: | Line 9: | ||
| ====== Text Processing with Regular Expressions ====== | ====== Text Processing with Regular Expressions ====== | ||
| - | **Contact Hour 10**: To be discussed on Tuesday | + | **Contact Hour 10**: To be discussed on Tuesday |
| **Lecturer**: | **Lecturer**: | ||
| Line 104: | Line 104: | ||
| * There' | * There' | ||
| * 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 [[/ | + | * Here's the [[http:// |
| ---- | ---- | ||
| Line 267: | 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 // | + | * usually triggered by // |
| * 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: [[/ | + | * 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:// |
| ---- | ---- | ||
| Line 280: | Line 280: | ||
| This function checks the validity of phone | This function checks the validity of phone | ||
| number input from a form | number input from a form | ||
| - | --> | + | --> |
| - | <html lang=" | + | < |
| < | < | ||
| - | <meta charset=" | + | <meta charset=" |
| + | <meta http-equiv=" | ||
| < | < | ||
| + | <meta name=" | ||
| + | |||
| + | <link rel=" | ||
| + | <link rel=" | ||
| + | <link rel=" | ||
| + | |||
| + | <script src=" | ||
| </ | </ | ||
| < | < | ||
| - | | + | |
| - | <form id=" | + | < |
| - | <label for=" | + | |
| - | <input id=" | + | <p>An example of the use of Regular Expressions for form validation. |
| - | <input type=" | + | View source to see the HTML code and use your browser' |
| - | </ | + | < |
| - | + | | |
| - | < | + | </ |
| + | < | ||
| + | | ||
| + | <label for=" | ||
| + | <input id=" | ||
| + | | ||
| + | <input type=" | ||
| + | </ | ||
| + | | ||
| + | |||
| + | <script src="// | ||
| + | < | ||
| + | |||
| + | <script src=" | ||
| + | <script src=" | ||
| + | < | ||
| <script src=" | <script src=" | ||
| </ | </ | ||
| Line 308: | Line 331: | ||
| */ | */ | ||
| - | function | + | function |
| // Use a simple pattern to check the number of digits and the dash | // Use a simple pattern to check the number of digits and the dash | ||
| Line 314: | Line 337: | ||
| var ok = num.search(/ | var ok = num.search(/ | ||
| - | if(ok == 0) | + | if (ok === 0) { |
| return true; | return true; | ||
| - | else | + | |
| + | | ||
| return false; | return false; | ||
| + | } | ||
| + | | ||
| }// end of function tst_phone_num | }// end of function tst_phone_num | ||
| /* Actual form validation. Called onclick */ | /* Actual form validation. Called onclick */ | ||
| - | var validate = function () { | + | var validate = function() { |
| var phoneNumber = document.getElementById(" | var phoneNumber = document.getElementById(" | ||
| - | if(tst_phone_num(phoneNumber.value)) { | + | if (test_phone_number(phoneNumber.value)) { |
| return true; | return true; | ||
| } else { | } else { | ||
| alert(" | alert(" | ||
| + | // prevent submission | ||
| return false; | return false; | ||
| - | // prevents submission | ||
| } | } | ||
| }; | }; | ||
| Line 336: | Line 361: | ||
| Test code for '' | Test code for '' | ||
| <code javascript> | <code javascript> | ||
| - | // Test tst_phone_num -- commented out in production | + | // Test test_phone_number |
| - | tests = [" | + | var test_phone_number_test = function() { |
| - | for( i = 0; i < tests.length; | + | var tests = [" |
| - | var tst = tst_phone_num(tests[i]); | + | for (i = 0; i < tests.length; |
| - | 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(" | + | } else { |
| + | console.error(" | ||
| + | } | ||
| } | } | ||
| - | } | + | }; |
| </ | </ | ||
| ===== HTML5 Pattern Attribute ===== | ===== HTML5 Pattern Attribute ===== | ||
| Line 365: | Line 392: | ||
| ===== HTML5 Version of the Phone Number Validator ===== | ===== HTML5 Version of the Phone Number Validator ===== | ||
| - | * [[/ | + | * [[http:// |
| ---- | ---- | ||
| Line 371: | Line 398: | ||
| <code html> | <code html> | ||
| < | < | ||
| - | < | + | < |
| - | Uses the new HTML5 pattern attribute | + | A function tst_phone_num is defined and tested. |
| - | to validate | + | This function checks the validity of phone |
| - | --> | + | number |
| - | <html lang=" | + | --> |
| + | < | ||
| < | < | ||
| - | <meta charset=" | + | <meta charset=" |
| + | <meta http-equiv=" | ||
| < | < | ||
| + | <meta name=" | ||
| + | |||
| + | <link rel=" | ||
| + | <link rel=" | ||
| + | <link rel=" | ||
| + | |||
| + | <script src=" | ||
| </ | </ | ||
| < | < | ||
| - | + | | |
| - | <form id=" | + | < |
| - | <label for=" | + | <p>An example of the use of Regular Expressions for form validation. View source to see the code.</ |
| - | <input id=" | + | < |
| - | | + | < |
| - | < | + | </ |
| - | <input type=" | + | < |
| - | </ | + | this can be used instead of JavaScript for form validation.</ |
| - | | + | <p>In production, you would normally need to provide a JavaScript fallback for browsers that don't yet support the < |
| + | <!-- No need for onsubmit validator now --> | ||
| + | | ||
| + | <label for=" | ||
| + | <input id=" | ||
| + | | ||
| + | title=" | ||
| + | <input type=" | ||
| + | </ | ||
| + | | ||
| + | |||
| + | <script src="// | ||
| + | < | ||
| + | |||
| + | <script src=" | ||
| + | <script src=" | ||
| <!-- Look no scripts! --> | <!-- Look no scripts! --> | ||
| </ | </ | ||
| </ | </ | ||
| </ | </ | ||
| - | |||
| ===== Debugging JavaScript: IE6+ ===== | ===== Debugging JavaScript: IE6+ ===== | ||
eg-259/lecture7.1329815161.txt.gz · Last modified: 2012/02/21 09:06 by eechris