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.
It should be noted that including client-side validation doesn’t mean that server-side validation should be ignored. Imagine the scenario where a user disables JavaScript in their browser and then enters invalid input to pass on to the server. If there is no server-side validation present, this invalid data will attempt to save to your database. This could result in the application crashing or invalid data being saved to your database. Neither of those situations are ideal. So the best case scenario would be for the developer to provide client-side validation for a quicker and more intuitive user experience, while also including server-side validation as a second line of defense should the client-side validation be incomplete or surpassed entirely.
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:
Sample Form
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
Please take note of the fact that I have highlighted the name attributed on each of the three form fields in my form. The JQuery Validation plugin leverages the name attribute of the form field in order to validate the form data. So when we write our custom JavaScript to set the validation rules for the form, the name attribute of each form field is what we will use to indicate to the plugin which field we need validated according to the rules we provide.
There are several paths you can take to set validation rules for your form fields. In my example, I will show you two of these scenarios. The first is to set a validation rule in the validate method itself. For the sake of simplicity, I have decided to simply make each of the form fields required through the use of the validate method. Here is the custom JavaScript I have written to provide “required” client-side validation for this form:
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.
In addition to providing custom JavaScript to indicate validation rules, JQuery Validation also provides support for HTML5 data attributes. This method of setting validation rules is very useful and less invasive. Instead of setting rules in the JavaScript code itself, you simply need to ensure that the JS calls the validate method on the form and can add data attributes to the form field itself in the HTML to indicate which validation rules it needs to abide by. For instance, let’s apply a rule to the First Name and Last Name fields which makes it invalid to provide a string with fewer than two characters. In order to do so, we simply need to adjust the HTML as follows:
First Name:Last Name:
By providing the attribute in the following format:
data-rule-[name of rule]=”[value]”
We indicate to the validate call on the form that this rule needs to be followed as well for successful form submission. No string of less than two characters will be accepted by the application for the indicated fields. And because we already make a call to the validate method where we set the rule for required, we don’t need to make any changes to the JavaScript for this rule to be enforced. Below is a screenshot post-first-form submission where one character has been entered in the First Name field. As you can see the user is immediately made aware that, while the required rule has now been satisfied, the input is still invalid as it contains less than two characters in the First Name field. This type of instant notification regarding validation rules provides the user with a better user experience, as they won’t have to submit the form again with invalid data.
Conclusion
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.
