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" />
<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.
