Introducing DHTML DOM Form Validation Copyright 2005 Department

  • Slides: 25
Download presentation
Introducing DHTML & DOM: Form Validation Copyright © 2005 Department of Computer & Information

Introducing DHTML & DOM: Form Validation Copyright © 2005 Department of Computer & Information Science

Goals By the end of this lecture you should … • Understand the differences

Goals By the end of this lecture you should … • Understand the differences between client-side & server-side validation. • Understand the differences between batch processing and real-time validation. continued … Copyright © 2005 Department of Computer & Information Science

Goals By the end of this lecture you should … • Understand how to

Goals By the end of this lecture you should … • Understand how to validate textboxes, passwords, select objects and radio buttons. • Understand how to use Regular Expressions to look for specific patterns when validating data. Copyright © 2005 Department of Computer & Information Science

Introducing Form Validation • Form validation is the process of checking the data that

Introducing Form Validation • Form validation is the process of checking the data that a user enters into form fields. We can write code to validate on the client-side or on the server-side. Copyright © 2005 Department of Computer & Information Science

Client-Side Validation • Client-side validation uses a scripting language, like Java. Script, to check

Client-Side Validation • Client-side validation uses a scripting language, like Java. Script, to check the data a user enters into a form before the web browser sends that data to the server for processing. • Client-side validation is usually very quick in responsiveness. However, it may not be entirely reliable, given that users may choose to disable Java. Script! Copyright © 2005 Department of Computer & Information Science

Server-Side Validation • Server-side validation is somewhat slower that client-side validation and relies on

Server-Side Validation • Server-side validation is somewhat slower that client-side validation and relies on a program located on the server. • While server-side validation may be slower, it is very reliable. The user can’t disable the server-side validation script. • Which type of validation should you use? Copyright © 2005 Department of Computer & Information Science

Validation Choices • The best choice is to insure that your data is the

Validation Choices • The best choice is to insure that your data is the most valid data that it can be – thus, use BOTH types of validation. Having validation on both sides, provides a failsafe. Having an initial validation on the client-side results in a lighter load given to the server, but maintaining server-side validation insures that validation does happen (in case the user disabled Java. Script). Copyright © 2005 Department of Computer & Information Science

Client-Side Validation Choices • Batch Validation: Relies on the on. Submit event handler. Checks

Client-Side Validation Choices • Batch Validation: Relies on the on. Submit event handler. Checks the entire form at once (well, almost -- depends on how you write your validation code). • Real-Time Validation: Relies on the on. Change/on. Blur event handlers. Checks individual fields. Makes it easy to bypass correcting a problem. Copyright © 2005 Department of Computer & Information Science

Batch Validation & on. Submit • We code the on. Submit event handler as

Batch Validation & on. Submit • We code the on. Submit event handler as an attribute of the form element. • Sending a Boolean value to on. Submit either allows a form to process (true) or prevents processing from happening (false). Copyright © 2005 Department of Computer & Information Science

Calling a Batch Validation Function • We use the reserved word return to get

Calling a Batch Validation Function • We use the reserved word return to get a Boolean value from the validation function and return that value to the event handler: <form name = “frm. Main” action = “…” on. Submit = “Java. Script: return Validate. Form(this); ”> Copyright © 2005 Department of Computer & Information Science

Checking for Empty Textboxes • We can write a validation function to check for

Checking for Empty Textboxes • We can write a validation function to check for empty textboxes by testing values against the textbox. value attribute. • We should check for the null value, the “” value and for empty spaces (using a regular expression). Copyright © 2005 Department of Computer & Information Science

Open the file called form. Validation_01. html Copyright © 2005 Department of Computer &

Open the file called form. Validation_01. html Copyright © 2005 Department of Computer & Information Science

Checking for No Selections • We can check against the selected. Index attribute to

Checking for No Selections • We can check against the selected. Index attribute to see if a user made a choice form a selection menu. If the user failed to make a selection the value of selected. Index == -1 (older browsers). • Newer browsers consider the first item selected automatically, if the user doesn’t make a choice (selected. Index == 0). Because of this, it’s a good idea to use the first option for instructions (like “Select One”) and then check against the values -1 AND 0. Copyright © 2005 Department of Computer & Information Science

Open the file called form. Validation_02. html Copyright © 2005 Department of Computer &

Open the file called form. Validation_02. html Copyright © 2005 Department of Computer & Information Science

Validating Passwords • Like textboxes, we can validate passwords using password. value attribute. •

Validating Passwords • Like textboxes, we can validate passwords using password. value attribute. • However, we might need to check for multiple situations, like: – – The password matches the confirm field. The password is of the correct length. The password contains no illegal characters. The password is comprised of a variety of different types of characters. Copyright © 2005 Department of Computer & Information Science

Open the file called form. Validation_03. html Copyright © 2005 Department of Computer &

Open the file called form. Validation_03. html Copyright © 2005 Department of Computer & Information Science

Validating Radio Buttons • When can use the checked attribute to see if a

Validating Radio Buttons • When can use the checked attribute to see if a user selected a radio button. • We can use a for loop to process through the radio button set, with a nested if to set a Boolean flag if the checked attribute is true. Copyright © 2005 Department of Computer & Information Science

Open the file called form. Validation_04. html Copyright © 2005 Department of Computer &

Open the file called form. Validation_04. html Copyright © 2005 Department of Computer & Information Science

Other Validation Examples • Validating E-mail Addresses • Validating Zip Codes • Validating Phone

Other Validation Examples • Validating E-mail Addresses • Validating Zip Codes • Validating Phone Numbers Copyright © 2005 Department of Computer & Information Science

Open the file called form. Validation_05. html Copyright © 2005 Department of Computer &

Open the file called form. Validation_05. html Copyright © 2005 Department of Computer & Information Science

Open the file called form. Validation_06. html Copyright © 2005 Department of Computer &

Open the file called form. Validation_06. html Copyright © 2005 Department of Computer & Information Science

Open the file called form. Validation_07. html Copyright © 2005 Department of Computer &

Open the file called form. Validation_07. html Copyright © 2005 Department of Computer & Information Science

Summary • Client-side validation ensures that data is sound before sending it to the

Summary • Client-side validation ensures that data is sound before sending it to the server. • It’s good practice to use both client-side and server-side validation. • We can use the value attribute to validate textboxes and passwords. continued … Copyright © 2005 Department of Computer & Information Science

Summary • We can use for loops with if branches to check select objects

Summary • We can use for loops with if branches to check select objects and radio buttons. • We can use regular expressions to match specific pattern values. Copyright © 2005 Department of Computer & Information Science

Resources • Java. Script Concepts & Techniques: Programming Interactive Web Sites by Tina Spain

Resources • Java. Script Concepts & Techniques: Programming Interactive Web Sites by Tina Spain Mc. Duffie (Franklin, Beedle & Associates, 2003) ISBN: 1 -887902 -69 -4 Copyright © 2005 Department of Computer & Information Science

SEG 3210 DHTML Tutorial DHTML DHTML is aSEG 3210 DHTML Tutorial DHTML DHTML is a
DHTML DHTML DHTML stands for Dynamic HTML HTMLDHTML DHTML DHTML stands for Dynamic HTML HTML
DHTML Introduction to DHTML the DOM JS reviewDHTML Introduction to DHTML the DOM JS review
DOM Document Object Model 2 DOM DHTML DynamicDOM Document Object Model 2 DOM DHTML Dynamic
DHTML XML DHTML Hold attention and attract usersDHTML XML DHTML Hold attention and attract users
Clientside programming DHTML Cookies DHTML Dynamic HTML UseClientside programming DHTML Cookies DHTML Dynamic HTML Use
DHTML 1 Innehll DHTML Varje del fr sigDHTML 1 Innehll DHTML Varje del fr sig
Introduction to DHTML What is DHTML l lIntroduction to DHTML What is DHTML l l
DOM SAX and DOM n SAX and DOMDOM SAX and DOM n SAX and DOM
DOM SAX and DOM n SAX and DOMDOM SAX and DOM n SAX and DOM
Anlise Literria DOM CASMURRO DOM DOM l DireoAnlise Literria DOM CASMURRO DOM DOM l Direo
DOM l DOM Level 3 API l DOMDOM l DOM Level 3 API l DOM
DOM SAX and DOM SAX and DOM areDOM SAX and DOM SAX and DOM are
DOM Document PHP DOM XML DOMDocument dom newDOM Document PHP DOM XML DOMDocument dom new
More DOM Manipulating DOM trees n n DOMMore DOM Manipulating DOM trees n n DOM
More DOM Manipulating DOM trees DOM unlike SAXMore DOM Manipulating DOM trees DOM unlike SAX
DOM DOMDocument Object Model DOM Core DOM HTMLDOMDOM DOMDocument Object Model DOM Core DOM HTMLDOM
JS DOM Form Form Object The Form objectJS DOM Form Form Object The Form object
Lect MCSBCS Java Script Form Validation Form validationLect MCSBCS Java Script Form Validation Form validation
Outline DHTML html CSS Java Script DOM HTMLOutline DHTML html CSS Java Script DOM HTML
Advanced DHTML DOM Working with the Window ObjectAdvanced DHTML DOM Working with the Window Object
DHTML DOM dhe Javascript Modeli i objekteve dheDHTML DOM dhe Javascript Modeli i objekteve dhe
Advanced DHTML DOM Review of Cascading Style SheetsAdvanced DHTML DOM Review of Cascading Style Sheets
DHTML and DOM Venkat Subramaniam svenkatcs uh eduDHTML and DOM Venkat Subramaniam svenkatcs uh edu