Ryan Boudreaux introduces the basic methods and approaches to implementing form validation on websites.
This article is part one of a multiple part series on exploring different form validation usage methods, error messages, feedback techniques, and approaches for website form validation implementations.
In a perfect world your web visitors will enter the correct and necessary information and finish the task successfully. However, in the real world people often make mistakes or abuse the process, and this is where form validation makes its appearance. The ultimate end result is to ensure that the visitors provide the proper and correctly formatted information to complete the form submission.
One exception to typical server-side validation is the use of Ajax calls to the server utilizing jQuery; as the user types in the information, it provides immediate form validation feedback. Using Ajax in conjunction with client-side validation, it can preemptively validate forms using the same client-side rules upon form submittal.
There are several types of validation that you can perform, and these typically fall into one of three categories including, required information, correct format, and confirmation.
The first set of information that should be validated is the required information, and this is typically indicated either with an asterisk (*) or a "required" statement adjacent to the field or declared prior to the form. Unless all fields are required, such an indication should be made to give the visitors proper direction for filling in the form fields.
In the case for universal design and access, the required data entry fields should be clearly and consistently distinguished from optional data entry fields. The classified standard should include the following:
- Provide an asterisk (*) in front of the label for all required fields, and include a statement that precedes the beginning of the data entry form, for example, "A field with an asterisk (*) before it is a required field."
- Provide the word "required" in front of or below the label for each required field. In addition, a statement indicating the required fields should be provided at the beginning of the data entry form. For example, "All required fields are indicated with the word "required" along with the label.
- Separate the optional and required fields when appropriate and practical. All groupings should be labeled accordingly "Required" or "Optional" to assist the end user.
Figure BAngie's List.
Most built-in validation tools including Dreamweaver's Validate Form Behavior can only validate the contents of text fields and cannot check that the correct radio buttons, checkboxes, drop-down lists, etc. are selected by the user. What you can do is use the Validate Form Behavior to ensure that text fields meet the following criteria and conditions:
- Contain numbers only. You can reject a form submission if a text field contains anything other than digits.
- Has a numeric value within a range. You can reject a form submission if the number in a text field is outside of the specified range.
- Contain an email address. However, it is important to note that validation typically only checks for the presence of an @ symbol in the email address, and does not check to see if it's a properly constructed email address such as user.name@domain_name.com
- Contains something. You can reject a form submission if no information is present in the text field.
In the next segment, I will demonstrate creating a simple form that will perform validation of several different text fields within a web document page using Dreamweaver in the examples.
Future segments will dive deeper into form validation coding methods, as well as review validation feedback, validation upon submit, real-time validation, adding helpful hints, dynamic tips, masking and reformatting user inputs, and adding captcha code to ensure human interface. I'll then put together a list of form validation resources. Let me know if there are particular form validation questions that you have in the discussion area below.