Enhance User Experience with JavaScript Form Validation

The article will discuss the pros and cons of JavaScript form validation and how to implement it with the JQuery Validate plugin.

Pros and Cons

JavaScript is a client side scripting language which inherently comes with pros and cons. The pros are significant enough that you'll want to use it while the cons come with a fair share of concerns.  Let's start out explaining the pros first.   

JavaScript is processed by the end user's browser.  This means employing it adds no additional overhead on your server.  JavaScript can directly interact with the Document Object Module (DOM).  This allows you to make changes to the page without reloading it, potentially decreasing the load on your server.  JavaScript is enabled by default in all browsers, even most phones and tablets so there are not additional actions required by the end user for it to work.

The attributes of JavaScript make it a great addition to html form validation.  You can use it to check the user's input and display a message for incorrect inputs before processing the form.  This increases the user experience by decreasing the number of page loads.  By decreasing the number of page loads your users, potential customers, clients and so on can do what they want to do on your site faster. 

The cons for using JavaScript might be a little scary but if you follow this simple rule you will be safe. JavaScript validation should never be used instead of server side validation.  As mentioned above JavaScript runs in the client's browser. This is a pro but at the same time a con because visitors can disable JavaScript from being processed. 

Using JQuery Validate

You don't need to recreate the wheel with JavaScript validation to reap its benefits.  The JQuery Validate plugin is a fast and easy way to get started. If you're already using JQuery for your project this plugin makes a lot of sense.   

Installation

JQuery is a JavaScript library that can be used on any Hosting.com platform service. Download JQuery and the Validate Plugin then upload it to your site in a folder called js. Add this to the head tag of your page.

<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

Usage

Now you need to initiate the validate method and add some meta data to your form fields. 

<script type="text/javascript">
   $(document).ready(function() {
     $("#formid").validate();
   });
</script><form id="formid" method="post" />
  <p><label for="name">Name: *</label>
  <input type="text" id="name" name="name" class="required" minlength="3" /></p>
  <p><label for="email">Email: *</label>
  <input type="text" id="email" name="email" class="required email" /></p>
  <p><input type="submit" name="submit" value="Submit" /> </p>
</form> 

Notice how the class "required" is used on the form fields that require values.  The validate plugin also accepts some common patterns such as email, url, number and many others to validate against.  These can also be placed in the class attribute.  Full documentation is available on the JQuery Validate Plugin page.