Tutorial 14 Working with Forms and Regular Expressions

Objectives Understand how to reference form element objects Extract data from input fields, selection lists, and option button groups Create a calculated field Understand the principles of form validation Perform a client-side validation New Perspectives on HTML, XHTML, and Dynamic HTML, 4e2

Objectives Work with string objects Work with regular expressions Apply regular expressions to zip code fields Validate credit card numbers New Perspectives on HTML, XHTML, and Dynamic HTML, 4e3

Working with Forms and Fields New Perspectives on HTML, XHTML, and Dynamic HTML, 4e4

Working with Forms and Fields Referencing a Web form – You have to work with the properties and methods of the form object and the elements it contains – JavaScript supports an object collection for forms document.forms[idref] where idref is the index number of form or document.forms[“form1”](form1 is form name) New Perspectives on HTML, XHTML, and Dynamic HTML, 4e5

Working with Forms and Fields Referencing a Web form – The elements within a form are organized into an elements collection – You can reference a form element either by its position in the collection, or by its name, or id attributes New Perspectives on HTML, XHTML, and Dynamic HTML, 4e6 Assume elements[2] is an input box for a date field

Working with Forms and Fields Referencing a form element New Perspectives on HTML, XHTML, and Dynamic HTML, 4e7

Working with Input Fields Setting the field value – To set the value contained in a field such as an input box, you use the value property – The general syntax is: document.formObject.element.value=fieldvalue; New Perspectives on HTML, XHTML, and Dynamic HTML, 4e8 400_pg-786-setting-field-value.htm

Working with Input Fields Setting the field value and other properties – partial list New Perspectives on HTML, XHTML, and Dynamic HTML, 4e9

Working with Input Fields Navigating between fields – To place the cursor in a particular field on a form, use: formObject.element.focus(); – To remove the focus from this field, use: formObject.element.blur(); New Perspectives on HTML, XHTML, and Dynamic HTML, 4e10 405_pg-787-executing-a-function.htm

Working with Selection Lists To reference a particular option in the collection, use: selection.options[idref] New Perspectives on HTML, XHTML, and Dynamic HTML, 4e11

Working with Selection Lists New Perspectives on HTML, XHTML, and Dynamic HTML, 4e12 410_pg-790-accessing-selection-lists.htm

Working with Option Buttons Using option buttons – Option buttons have the reference: options[idref] – Where options is the reference to the group of option buttons and idref is either the index number or id of the individual option button New Perspectives on HTML, XHTML, and Dynamic HTML, 4e13

Working with Option Buttons and Check Boxes Using the “this” keyword – The this keyword is a JavaScript object reference that refers to the currently selected object, whatever that may be New Perspectives on HTML, XHTML, and Dynamic HTML, 4e14 415_pg-794-option-buttons.htm Useful when looping through all objects and you don't know the current object.

Working with Option Buttons and Check Boxes Working with check boxes – Work the same way as option buttons – In addition, the value associated with a check box is stored in the value property of the check box object – This value is applied only when the check box is checked – When unchecked, its field has no value assigned to it New Perspectives on HTML, XHTML, and Dynamic HTML, 4e15

Creating Calculated Fields Converting between text strings and numeric values – Explicitly indicate that you want to convert parseFloat(text) e.g. parseFloat(document.forms[0]fieldname.value); New Perspectives on HTML, XHTML, and Dynamic HTML, 4e16 420_pg-796-converting-text-to-numeric.htm

17 Go to my Web site and download the files for Tutorial 14 Unzip the files into a work folder on your flash drive Go to pg 781 in text book and start the in-chapter exercise.

Working with Form Validation Form validation is a process by which the server or user’s browser checks a form for data entry errors With server-side validation, a form is sent to the Web server for checking In client-side validation, the Web browser checks the form, which is not submitted to the server until it passes inspection New Perspectives on HTML, XHTML, and Dynamic HTML, 4e18

Working with Form Validation Submitting a Form – To control actions on a form when the form first loads: window.onload = function; – To control the submission process, JavaScript provides the onsubmit event handler formobj.onsubmit = function; – If the function returns a value of false, the submit event is cancelled, while a value of true allows the submit event to continue unabated New Perspectives on HTML, XHTML, and Dynamic HTML, 4e19

Working with Form Validation Alerting the user – An alert box is a dialog box that displays an informative message to the user along with an OK button alert(message); New Perspectives on HTML, XHTML, and Dynamic HTML, 4e20

Working with Text Strings Calculating the length of a text string – The following code calculates the number of characters in the stringVar variable, storing the value 17 in the lengthValue variable stringVar = "GPS-ware Products"; lengthValue = stringVar.length New Perspectives on HTML, XHTML, and Dynamic HTML, 4e21

Working with Text Strings Working with the string object methods – To determine the number of characters in a text string, use the object property string.length – To extract a character from a text string, use the method string.charAt(i) – To extract a substring from a text string, use the method string.slice(start, end) New Perspectives on HTML, XHTML, and Dynamic HTML, 4e22 425_pg-808-calc-length-strg 430_pg-808-charAt-method.htm 435_pg-808-slice-method.htm

Working with the string object methods – You can also use the substr method to extract a string – To split a string into several substrings, use the command strArray = string.split(str) Where str is the delimiter that separates the words in the string (often a blank) – To search a string, use the method string.indexOf(str, start) New Perspectives on HTML, XHTML, and Dynamic HTML, 4e23 440_pg-808-substr-method.htm 445_pg-808-split-words-method.htm

Working with Text Strings Formatting text strings New Perspectives on HTML, XHTML, and Dynamic HTML, 4e24

Introducing Regular Expressions A regular expression is a text string that defines a character pattern One use of regular expressions is pattern- matching, in which a text string is tested to see whether it matches the pattern defined by a regular expression New Perspectives on HTML, XHTML, and Dynamic HTML, 4e25

Introducing Regular Expressions Creating a regular expression – You create a regular expression in JavaScript using the command re = /pattern/; – Where re is the variable that will hold the regular expression and pattern is the regular expression – This syntax for creating regular expressions is sometimes referred to as a regular expression literal New Perspectives on HTML, XHTML, and Dynamic HTML, 4e26

Introducing Regular Expressions Matching a substring – The most basic regular expression consists of a substring that you want to locate in the test string – The regular expression to match the first occurrence of a substring is /chars/ where chars is the string you are checking for Use the test() function to determine if you have a match – The test() function returns a value of true if pattern matches and false if it does not match New Perspectives on HTML, XHTML, and Dynamic HTML, 4e27 450_reg_exp_test_state_field.htm

Introducing Regular Expressions Setting regular expression flags – To make a regular expression not sensitive to case, use the regular expression literal /pattern/i No space after the last slash Must be lower case i – To allow a global search for all matches in a test string, use the regular expression literal /pattern/g New Perspectives on HTML, XHTML, and Dynamic HTML, 4e28 455_reg_exp_test_state_no_case_sens.htm

Introducing Regular Expressions Defining character positions New Perspectives on HTML, XHTML, and Dynamic HTML, 4e29 460_reg_exp_test_begin_of_text.htm 465_reg_exp_test_end_of_text.htm

Introducing Regular Expressions Defining character positions New Perspectives on HTML, XHTML, and Dynamic HTML, 4e30New Perspectives on HTML, XHTML, and DHTML, Comprehensive 470_reg_exp_test_zipcode.htm

Introducing Regular Expressions Defining character positions – Can specify a collection of characters known as a character class to limit the regular expression to only a select group of characters New Perspectives on HTML, XHTML, and Dynamic HTML, 4e31

Introducing Regular Expressions Defining character positions New Perspectives on HTML, XHTML, and Dynamic HTML, 4e32

Introducing Regular Expressions Repetition characters New Perspectives on HTML, XHTML, and Dynamic HTML, 4e33 480_reg_exp_ss_number.htm

Introducing Regular Expressions Escape Sequences – An escape sequence is a special command inside a text string that tells the JavaScript interpreter not to interpret what follows as a character – The character which indicates an escape sequence in a regular expression is the backslash character \ You can use the backslash to turn a regular character into a special character: \d says don't treat the "d" as the letter "d", treat it as a digit selector You can also use the backslash to turn a special character into a regular character: \/ says don't treat the "/" as a delimiter, treat it as a regular slash New Perspectives on HTML, XHTML, and Dynamic HTML, 4e34 490_reg_exp_pg-828-escape-character.htm

Introducing Regular Expressions Escape Sequences New Perspectives on HTML, XHTML, and Dynamic HTML, 4e35

Introducing Regular Expressions The regular expression object New Perspectives on HTML, XHTML, and Dynamic HTML, 4e36

Working with the Regular Expression Object Validating a zip code New Perspectives on HTML, XHTML, and Dynamic HTML, 4e37 495_reg_exp_pg-834-5,9,0-char-zip-code.htm

Validating Financial Information Removing blank spaces from credit card numbers New Perspectives on HTML, XHTML, and Dynamic HTML, 4e38 500_reg_exp_pg-836-remove-dashes.htm

Validating Financial Information Validating credit card number patterns New Perspectives on HTML, XHTML, and Dynamic HTML, 4e39 Stop Here

Validating Financial Information The Luhn Formula – All credit card numbers must satisfy the Luhn Formula, or Mod10 algorithm, which is a formula developed by a group of mathematicians in the 1960s to provide a quick validation check on an account number by adding up the digits in the number New Perspectives on HTML, XHTML, and Dynamic HTML, 4e40

Passing Data Between Forms Appending Form Data – Text strings can be appended to any URL by adding the ? character to the Web address followed by the text string Use the get method – One property of the location object is the location.search property, which contains the text of any data appended to the URL, including the ? character New Perspectives on HTML, XHTML, and Dynamic HTML, 4e41

Passing Data from a Form Appending data to a URL – There are several limitations to the technique of appending data to a URL – URLs are limited in their length – Characters other than letters and numbers cannot be passed in the URL without modification – URLs cannot contain blank spaces, for example, a blank space is converted to the character code %20 New Perspectives on HTML, XHTML, and Dynamic HTML, 4e42

Passing Data from a Form Appending and retrieving form data – Can use the technique of appending data to the URL with Web forms, too – Do this by setting a form’s action attribute to the URL of the page to which you want to pass the data, and setting the method of the form to “get” New Perspectives on HTML, XHTML, and Dynamic HTML, 4e43

Passing Data from a Form Appending and retrieving form data – Use the location.search property and the slice() method to extract only the text string of the field names and values – Use the unescape() function to remove any escape sequences characters from the text string – Convert each occurrence of the + symbol to a blank space – Split the text string at every occurrence of an = or & character, storing the substrings into an array New Perspectives on HTML, XHTML, and Dynamic HTML, 4e44