Form Validation

1. Form Validation

2. 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 …

3. 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.

4. 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.

5. 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 is usually very quick in responsiveness. However, it may not be entirely reliable, given that users may choose to disable JavaScript!

6. 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?

7. 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).

8. 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). • Real-Time Validation: Relies on the onChange/onBlur event handlers. Checks individual fields.

9. Batch Validation & onSubmit • We code the onSubmit event handler as an attribute of the form element. • Sending a Boolean (true/false) value to onSubmit either allows a form to process (true) or prevents processing from happening (false).

10. 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 = “frmMain”action = “…”onSubmit = “JavaScript:return ValidateForm(this);”>

11. 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).

12. Open the file called formValidation_01.html

13. Checking for No Selections • We can check against the selectedIndex attribute to see if a user made a choice from 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.

14. Open the file called formValidation_02.html

15. 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.

16. Open the file called formValidation_03.html

17. 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.

18. Open the file called formValidation_04.html

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

20. Open the file called formValidation_05.html

21. Open the file called formValidation_06.html

22. Open the file called formValidation_07.html

23. 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 …

24. 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.