Client side validation, also known as AJAX form validation, enables the validation of form data before the form is submitted to the web server. The users of our forms need not wait for the form data to travel back to the web server, get processed, and then return from the server with error messages flagging erroneous or missing input.
Developers of the Clientside Validation project have put together a suite of modules employing JavaScript that bring this functionality to Drupal Forms API forms, vertical tabs, and of particular interest to us, Webform.
Let's navigate to the Clientside Validation homepage at http://drupal.org/project/clientside_validation and download the latest 7.x version. The compressed folder needs to be extracted in sites/all/modules so that we have sites/all/modules/clientside_validation.
Now we navigate to our site's Modules page to enable the module by checking the box next to its name. We also need to enable client side validation for Webforms, so we check the box at Clientside Validation Webform and complete the installation process by clicking on Save configuration.
The effects of the Clientside Validation module are immediate, but we have a configuration setting to tweak for the benefit of our end users:
- After the module has been enabled, we want to navigate to our site configuration page by clicking on Configuration in the menu toolbar.
- Scroll down to VALIDATION and click on Clientside Validation.
- Scrolling down to the ERROR MESSAGE PLACEMENT fieldset, we select Before label at Default location.
- Accepting all the remaining default settings, we scroll further down to click on the Save configuration button.
- Returning to our Video Store Survey form, we enter only our name in the Email address field and click on the Yes, I accept radio button under Acceptance of Terms of Use.
- Oops, we have a validation error! Let's return to the Email address field and enter a well-formed e-mail address.
- As we complete our e-mail address, the error message disappears.
Here we see the magic of JavaScript at work again, this time in the context of validating form input. Some types of validation such as the e-mail address we just tested, occur as soon as we try to leave the input field. Other validations such as mandatory fields, will be validated when we click upon the Submit button.
The mandatory fields are, by default, validated before the form can be submitted to the web server. If all fields pass validation, the normal submit process is permitted to continue and the form data is passed back to Webform for processing. Should any errors be found when Submit is clicked, the erroneous fields will be flagged (just as in our Email address example) and the form will automatically scroll to present the erroneous field to the user. As we correct the input errors, so the error messages will disappear.
The configuration change we made was to specify that an AJAX validation error message relating to a field should be placed just ahead of that field's label on the form. In this way users will have a good idea of where their error may lie.
The default behavior, which follows from the standard Drupal methodology, is for the error messages to appear at the top of the form instead.
Clientside Validation comes with a wealth of configuration options for us to explore at our leisure. We should take some time to thoroughly read the configuration page and experiment freely to be aware of the options granted to us by this powerful module. We even have the power of choice over which forms have client side validation and which do not.