Forms for collecting information from users via a form can be found everywhere on the internet. For a developer, an integral part of adding a form to an application is providing sufficient form validation to both preserve data integrity and protect your server from potentially malicious user input. This validation comes in two types: server-side validation and client-side validation.
The JQuery Validation plugin is an easy-to-use framework for form validation. In this post, I will discuss the usefulness of client-side validation and show you how to get started with JQuery Validation.
The Usefulness of Client-Side Validation
It’s easy to understand why we need form validation on the server side (and just form validation in general) as it prevents users from saving incomplete forms or invalid form data that could cause issues for the applications that use this form data after it has been saved. But, if we already have server-side validation, why worry about also including client-side validation? There are a few key benefits to using client-side validation to bolster your web application.
Server-side validation requires a round trip to the server to provide the user with information regarding the validity of their input. Client-side validation, however, does not. This means a better and more intuitive user experience. With the use of the JQuery Validation plugin, once the initial submission of the form has occurred, the validation will respond to user input immediately. If a form field is indicated as required and the user begins to provide a value, then the error will disappear, indicating to the user that they have provided valid data without needing another form submission. Another advantage of including client-side validation for forms in your web application is, simply put, the benefit of speed. Client-side validation is faster as it doesn’t require a trip to the server. The form data is validated in the browser, ensuring that only valid data is passed on to the server.
Getting Started with JQuery Validation
Getting started with the JQuery Validation plugin is a fairly simple process. It requires the import of the standard JQuery library, and subsequently the JQuery Validation library. Once these two libraries are included on your page, you are free to leverage their functionality and start validating your form data. For my example, I have included the libraries at the top of my HTML file, sampleform.html, as follows:
The lines highlighted in red represent the inclusion of the JQuery and JQuery Validation libraries.
The next step is to add my simple HTML form. Below, you will see the portion of my HTML file that represents the HTML form asking for first name, last name and favorite movie from the user using my simple web application.
Provide User Information
We use the form ID in the JQuery selector to attach the validate method to the form. Inside the validate method, we provide the appropriate option to set validation rules on the form. Inside the rules option, we use the name attribute of each of the form fields to indicate that we’re applying these validation rules to these particular fields. And, finally, we simply set the required rule to true to indicate to the JS library that these particular fields are indeed required. As for the messages option, this can be used to set custom messages for the validation rules. Upon failure of the specified rule, the custom message will be displayed.
Here are some screenshots to demonstrate the validation plugin enforcing the required rule. The first screenshot will show the form on page load, and the second screenshot will show the form after submission with no user input:
The beautiful thing about client-side validation is that, without another submit, the required error will disappear once any user input is provided to the field marked “required,” letting the user know that the form data is valid without forcing them to submit again to discover the next round of errors.
First Name:Last Name:
By providing the attribute in the following format:
data-rule-[name of rule]=”[value]”
Client-side validation is a good way to bolster your application for a better user experience. And the JQuery Validation plugin is a good option for providing client-side validation. By making validation faster and more intuitive you ensure that the user can get through the form, inputting valid data, without the frustration of multiple submissions.