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

Copyright ©2005  Department of Computer & Information Science Goals By the end of this lecture you should … Understand the differences between client-side & server-side validation.Understand the differences between client-side & server-side validation. Understand the differences between batch processing and real-time 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 validate textboxes, passwords, select objects and radio buttons.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.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 a user enters into form fields. We can write code to validate on the client-side or on the server-side.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 JavaScript, 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 uses a scripting language, like JavaScript, 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 JavaScript!Client-side validation is usually very quick in responsiveness. However, it may not be entirely reliable, given that users may choose to disable JavaScript!

Copyright ©2005  Department of Computer & Information Science Server-Side Validation Server-side validation is somewhat slower that client-side validation and relies on a program located on the server.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.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?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 most valid data that it can be – thus, use BOTH types of validation. Having validation on both sides, provides a fail-safe. 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 JavaScript).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 fail-safe. 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 JavaScript).

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

Copyright ©2005  Department of Computer & Information Science Batch Validation & onSubmit We code the onSubmit event handler as an attribute of the form element.We code the onSubmit event handler as an attribute of the form element. Sending a Boolean value to onSubmit either allows a form to process ( true ) or prevents processing from happening ( false ).Sending a Boolean value to onSubmit 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 a Boolean value from the validation function and return that value to the event handler:We use the reserved word return to get a Boolean value from the validation function and return that value to the event handler:

Copyright ©2005  Department of Computer & Information Science Checking for Empty Textboxes We can write a validation function to check for empty textboxes by testing values against the textbox.value attribute.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).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 formValidation_01.html

Copyright ©2005  Department of Computer & Information Science Checking for No Selections We can check against the selectedIndex attribute to see if a user made a choice form a selection menu. If the user failed to make a selection the value of selectedIndex == -1 (older browsers).We can check against the selectedIndex attribute to see if a user made a choice form a selection menu. If the user failed to make a selection the value of selectedIndex == -1 (older browsers). Newer browsers consider the first item selected automatically, if the user doesn’t make a choice ( selectedIndex == 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.Newer browsers consider the first item selected automatically, if the user doesn’t make a choice ( selectedIndex == 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 formValidation_02.html

Copyright ©2005  Department of Computer & Information Science Validating Passwords Like textboxes, we can validate passwords using password.value attribute.Like textboxes, we can validate passwords using password.value attribute. However, we might need to check for multiple situations, like: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 formValidation_03.html

Copyright ©2005  Department of Computer & Information Science Validating Radio Buttons When can use the checked attribute to see if a user selected a radio button.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.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 formValidation_04.html

Copyright ©2005  Department of Computer & Information Science Other Validation Examples Validating AddressesValidating Addresses Validating Zip CodesValidating Zip Codes Validating Phone NumbersValidating Phone Numbers

Copyright ©2005  Department of Computer & Information Science Open the file called formValidation_05.html

Copyright ©2005  Department of Computer & Information Science Open the file called formValidation_06.html

Copyright ©2005  Department of Computer & Information Science Open the file called formValidation_07.html

Copyright ©2005  Department of Computer & Information Science Summary Client-side validation ensures that data is sound before sending it to the server.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.It’s good practice to use both client-side and server-side validation. We can use the value attribute to validate textboxes and passwords.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 and radio buttons.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.We can use regular expressions to match specific pattern values.

Copyright ©2005  Department of Computer & Information Science Resources JavaScript Concepts & Techniques: Programming Interactive Web Sites by Tina Spain McDuffie (Franklin, Beedle & Associates, 2003) ISBN: JavaScript Concepts & Techniques: Programming Interactive Web Sites by Tina Spain McDuffie (Franklin, Beedle & Associates, 2003) ISBN: