Upload
cameron-copeland
View
230
Download
0
Embed Size (px)
Citation preview
CST 200 - JavaScript
Validating Form Data with JavaScript
2
Objectives
In this chapter, you will:
• Learn about JavaScript and forms
• Use JavaScript to manipulate and validate form elements
• Learn how to manipulate selection lists with JavaScript
• Learn how to validate submitted data
3
Understanding Forms
• Many Web sites use forms– Collect information from users
• Transmit to a server for processing
• Web page forms– Frequently gather search criteria from a user– Transmit data to a server-side scripting language
program
• Popular server-side scripting languages– PHP, Common Gateway Interface (CGI), Active
Server Pages (ASP), and Java Server Pages (JSP)
4
Figure 5-1 Twitter sign-up form
Understanding Forms (cont’d.)
5
Figure 5-2 Google advanced search page
Understanding Forms (cont’d.)
6
Understanding the <form> Element
• <form> element – Designates a form within a Web page– Contains all text and elements making up a form
7
Table 5-1 Attributes of the <form> element
Understanding the <form> Element (cont’d)
8
Working with Form Controls
• Primary elements used within the <form> element– <input>, <button>, <select>, <textarea>
• <input> and <button> elements– Create user interaction input fields
• <select> element– Displays choices in drop-down menu or scrolling list
• <textarea> element– Creates text field where users enter multiple lines of
information
9
Working with Form Controls (cont’d.)
• Field– Form element where:
• User can enter data
• User can select or change
• <input>, <textarea>, <select> elements:– Can include name and value attributes
• name attribute defines a name for an element• value attribute defines a default value
• Example:<input type = "text" name = "company_info"
value = "Skyward Flyers" />
10
Using JavaScript with Forms
• Form object– Represents a form on a Web page– Used to access form controls, verify form information– Part of the browser object model
• Referencing forms and form elements– Document object includes a forms[] array
• Contains all forms on a Web page
– <form> element’s name attribute• Deprecated in XHTML
– Form object has an elements[] array
11
Using JavaScript with Forms (cont’d.)
• Referencing forms and form elements (cont’d.)– elements[] array
• Contains objects representing each control in a form
– Reference form index number in the forms[] array• Followed by the appropriate element index number
from the elements[] array
• Form object– DOM Object that represents HTML form– Contains properties, events and methods
12
Table 5-2 Form object properties
Using JavaScript with Forms (cont’d.)
13
Table 5-3 Form object events
Table 5-4 Form object methods
Using JavaScript with Forms (cont’d.)
14
Working with Input Fields
• Empty <input> element– Generates input fields that create interface elements
• Text boxes, radio buttons, and so on• checked attribute
– Boolean attribute specifying one of two values• True or false
• HTML programmer specifies a check box control selected or checked by default– Includes the Boolean checked attribute within the <input> element
– Example: <input type = "checkbox" checked />
15
Table 5-5 Attributes of the <input> element
Working with Input Fields (cont’d.)
16
Working with Input Fields (cont’d.)
• Minimized form– Boolean attribute not assigned a value– Illegal in XHTML
• Full form of a Boolean attribute– Assign attribute name as the attribute’s value
• Most important <input> element attribute: type attribute– Determines type of element rendered: required– Valid type attribute values
• text, password, radio, check box, reset, button, submit, image, file, hidden
17
Input Field Objects
• For controls created with an <input> element– Each control represented by an object similar to the
control name• Input• Radio• Checkbox
18
Table 5-7 Input field object methods and their associated form controls
Input Field Objects (cont’d.)
19
Text Boxes
• Text box– <input> element with a type of “text”– Accepts a single line of text
• value attribute– Specifies text used as the default value at the
moment a form first loads
• Example– Form with text boxes that include name, value, and size attributes
20
Figure 5-5: Form with several text <input> elements
Text Boxes (cont’d.)
21
Text Boxes (cont’d.)
• Form validation with JavaScript– Takes place when form submitted
• Example: – Add text <input> elements to the subscription form
• JavaScript’s built-in isNaN() function – Determines if user entered a numeric value
• Example: – Add function to the subscription.html document to
verify numeric Zip code or telephone data entered
22
Check Boxes
• Check boxes– <input> element with a type of “checkbox”– Can be set to Yes (checked) or No (unchecked)– When users should select whether or not to include a
certain item• Or to allow users to select multiple values from a list
• checked attribute– Sets initial value of the check box to Yes
• Group check boxes by giving each check box the same name value
23
Check Boxes (cont’d.)
• Each check box can have a different value
• Users can select as many check boxes in a group as they like
Figure 5-12 Form with check boxes
24
Password Boxes
• Password box– <input> element with a type of “password”– Entering passwords or other types of sensitive data– Character typed appears as an asterisk or bullet
Figure 5-7 Password box in a Web browser
25
Push Buttons
• Push button– <input> element with a type of “button”– Similar to OK and Cancel buttons in dialog boxes– Executes JavaScript code performing a function
• Use name and value attributes with a push button – value attribute text appears on the button’s face– Button width: <input type = "button"> element
• Dependent on number of characters in its value attribute
– name and value attributes not required
26
Figure 5-9 A push button in a Web browser
<p><input type = "button" name = "push_button"value = "Click Here"onclick = "window.alert('You clicked a push
button.');" /></p>
Push Buttons (cont’d.)
27
Radio Buttons
• Group of radio buttons or option buttons– <input> element with a type of “radio”– User can select one value
• All radio buttons in the group– Must have the same name attribute
• Each radio button– Requires a value attribute identifying its unique
value
• Radio <input> element has a checked attribute– Sets an initial value for the group
28
Figure 5-10 Form with radio buttons
Radio Buttons (cont’d.)
29
Radio Buttons (cont’d.)
• Multiple form elements sharing the same name– JavaScript creates an array out of the elements using
the shared name
• Radio buttons share the same name – A single name = value pair can be submitted to a
server-side script
• checked property returns a value of true– If a check box or radio button selected
30
Creating Selection Lists
• <select> element creates a selection list– Presents users with fixed lists of options
• Options displayed in a selection list– Created with <option> elements
• <select> element must appear within a block-level element: such as the <p> element
• Selection list can include a scroll bar
31
Table 5-8 Attributes of the <select> element
Creating Selection Lists (cont’d.)
32
Menu Options
• <option> element– Specifies options appearing in a selection list– Content of <option> element
• Appears as a menu option in a selection list
• Can specify a selection list’s menu options– Use <option> elements placed within a <select>
element
• Each selection list must contain at least one <option> element
33
Table 5-9 Attributes of the <option> element
Menu Options (cont’d.)
34
The Select and Option Objects
• Select object – Represents a selection list in a form– Includes an options[] array containing an Option
object for each <option> element in the selection list
• Option object– Represents an option in a selection list
• Programmer appends properties in Table 5-10 to the name representing the <select> element
• Programmer appends properties in Table 5-12 to the options[] array
35
Table 5-10 Properties of the Select object
The Select and Option Objects (cont’d.)
36
Table 5-11 Methods of the Select object
The Select and Option Objects (cont’d.)
37
Table 5-12 Properties of the Option object
The Select and Option Objects (cont’d.)
38
Adding Options to a Selection List
• ECMAScript recommends adding new options to a selection list– Using the add() method of the Select object
• Method not consistently implemented
• Create a new option with Option() constructor– Then assign the object to an empty element in an options[] array
• Syntaxvar variable_name = new Option(text,
value, defaultSelected, selected);
39
Removing Options from a Selection List
• Pass option’s index number in options[] array to the remove() method of the Select object– Remaining elements are reordered
• Remove all the options from an options array– Set length of options[] array to zero
40
Changing Options in a Selection List
• Assign new values to the option’s value and text properties
Figure 5-15 Shopping list form
41
Validating Submitted Data
• onsubmit event handler– Executes when a form submitted to a server-side
script– Often used to verify or validate a form’s data before it
is sent to a server• onreset event handler
– Executes when reset button selected on a form– Confirm that a user really wants to reset the contents
of a form
• Must return a value of true or false– Depends if form should be submitted or reset
42
Summary
• Forms– Collect information from users– Transmit information to a server for processing
• <form> element designates a form in a Web page
• Elements to create form controls: <input>, <button>, <select>, and <textarea>
• Field– Any form element into which a user can enter data
• Form object represents a form on a Web page
43
Summary (cont’d.)
• Document object includes a forms[] array– Contains all of the forms on a Web page
• Empty <input> element used to generate input fields
• <select> element creates a selection list
• Use <option> elements to specify the options that appear in a selection list
• Select object represents a selection list in a form
44
Summary (cont’d.)
• Option object represents an option in a selection list• Submit button transmits a form’s data to a Web server• Reset button clears all form entries and resets each
form element to the initial value specified by its value attribute
• onsubmit event handler executes when a form submitted to a server-side script
• onreset event handler executes when a reset button selected on a form