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.
 
 
Thx for this plugin, really usefull
ReplyDeleteFantastic!
ReplyDelete