jQuery Validate: Required If Visible

I needed a generic "required if visible" rule for use with the jQuery Validation plugin. This is the result:

// jQuery.validate.requiredIfVisible.js
// Copyright (c) 2010 Ori Peleg, http://orip.org, distributed under the MIT license
(function($) {
$.validator.addMethod(
"requiredIfVisible",
function(value, element, params) {
function isVisible(e) {
// the element and all of its parents must be :visible
// inspiration: http://remysharp.com/2008/10/17/jquery-really-visible/
return e.is(":visible") && e.parents(":not(:visible)").length == 0;
}

if (isVisible($(element))) {
// call the "required" method
return $.validator.methods.required.call(this, $.trim(element.value), element);
}

return true;
},
$.validator.messages.required
);
})(jQuery);

Notes:

• Using required:"#myinput:visible" could have worked, but ":visible" doesn't check for hidden parents, and I didn't want to repeat the element selector.
• ":hidden" is false for elements with the "visibility:hidden" CSS rule, so I couldn't use ":not(:hidden)" either.
• Technique for checking element visibility from Remy Sharp's blog.

jQuery Validation and default messages

Here is how we specify errors messages for the jQuery Validation plugin by Jörn Zaefferer: For built-in validators we modify $.validator.messages, as Jörn shows here.

$.extend($.validator.messages, {
  required: "Required",
  email: "Email not valid",
  ...
});

(we fill the actual messages in server-side processing, we don't hard-code them in the JS) For custom validators we... add custom validators.

$.validator.addMethod(
  "shouldBeGreen",
  function(value, element) {
    return this.optional(element) || /green/.test(value);
  },
  "Not green"
);

Now we can specify 'shouldBeGreen' in an input's class. That's it. Pretty simple, but it took us a while to figure it out so I hope this helps somebody.

jQuery Validation and the Google Toolbar

I am one of many happy users of the jQuery Validation plugin by Jörn Zaefferer, but I had some trouble with the Google Toolbar's auto-fill feature. When enabled, it adds a tooltip to text input fields it didn't auto-fill that says:

Your Google Toolbar can fill this in for you. Select AutoFill

One of the ways to tell the validation plugin which error message to show is by... setting the 'title' attribute, so when the Toolbar is installed all the error messages are "Your Google Toolbar can...."

Jörn has addressed the Google Toolbar issue since version 1.0, but in a way that doesn't let me use my preferred method of customizing the validation error messages.

So now there's a trac ticket including a patch with a new 'ignoreTitle' option that fixes this (if you don't use 'title' yourself).

[Edit: 26 October, 2008] Jörn has commited my patch, you can get the latest jQuery Validate plugin with Subversion:

svn co http://jqueryjs.googlecode.com/svn/trunk/plugins/validate

[Edit: 3 November, 2008] Only 'jquery.validate.js' contains the patch in svn - the minified and packed versions don't. Use the YUI Compressor or the CompressorRater to minify them yourself. Thanks to Ilan Berkner for catching this.

[Edit:21 November, 2008] Here's a direct link to the file

[Edit:8 December, 2008] Version 1.5 of the Validation plugin now contains this patch.