jQuery, the most prominent JavaScript library to date, is used on almost 60 percent of the top 10 million websites. One of the best attributes of this open-source software is the vast number of timesaving plugins available, like the popular jQuery Validation plugin, which makes validating form fields a breeze.

Though the jQuery Validation plugin can make your life easier, you’ll still encounter the occasional hiccup. Have you ever crunched out line after line of beautiful code, feeling great, only to test and find your .validate() function isn’t working? It can be pretty exasperating. Below are a few jQuery Validation troubleshooting suggestions that can save you time and frustration:

Why is it always an IE issue?

With the release of jQuery 2.0, support for Internet Explorer 6, 7 and 8 browsers went the way of the dinosaur. So you didn’t upgrade to jQuery 2.0. Why are there still IE 6/7/8 incompatibility issues? Well, you also need to check what version of jquery.validate you have. Here’s what you need to maintain support for IE 6/7/8:

• jQuery 1.0 to 1.5 used with jquery.validate 1.8 and below
• jQuery 1.9 to 1.11 used with jquery.validate 1.9 and above

It's not the lightbulb — it's the switch

Your jQuery code might not be what’s causing the issue at all. A common issue occurs within the submit button in the form’s HTML. The jQuery Validation plugin was designed to handle the submit by capturing the click event, so be sure to use the following in the form:

 <input type="submit" /> 

or

 <button type="submit">Submit</button>

Also, confirm that you’ve assigned a distinct id to the submit element — and especially avoid using the same id on the form element.

Is that really what it’s called?

The jQuery Validation plugin, like most plugins, has default settings that can be altered to fit various needs. However, if you’re going to tap into these special settings, it’s very important to know how to call on them.

For example, by default this plugin will focus on the invalid field. To change this, use onfocusout=false not onblur=false. Familiarize yourself with the plugin’s documentation to avoid this common issue.

The power of the dollar sign

Another common problem is caused by too much recursion. Check out these two code snippets:

jQuery_form_validation_A.js

$("#myform").validate({
  submitHandler: function(form) {
    // some other code maybe disabling submit button then:
    $(form).submit();
  }
 });

jQuery_form_validation_B.js

$("#myform").validate({
  submitHandler: function(form) {
    form.submit();
  }
 });

jQuery_form_validation_A.js uses $(form).submit(). This ultimately will trigger another call to the submitHandler, causing recursion.

However, jQuery_form_validation B.js drops the $ from the front of form.submit(). This skips the validation repeat including the submitHandler and works without error.

That’s a name worth quoting

Sometimes, form field name attributes can get a bit complex. While there’s nothing wrong with that, if a name uses brackets or periods, you can save yourself a headache and just put the name in quotation marks when using the rules option.

$("#myform").validate({
   rules: {
     // no quoting necessary
     name: "required",
     // quoting necessary!
     "user[email]": "email",
     // dots need quoting, too!
     "user.address.street": "required"
   }
 }); 

Hopefully, these troubleshooting suggestions can help solve your JQuery Validation issues. However, bugs are constantly being reported and fixed, so look to jQuery Validation’s GitHub issues list to stay up to date.

Check out our Salary Guide for the latest salary trends and starting salaries for IT jobs.