javascript - How do you ignore hidden page elements when validating using jquery.validationEngine.js?

Question

I have a div who's style defaults to "display: none" until a previous field has been filled out, and it contains a drop down list that requires a selection.

If the page is submitted before this div becomes visible, the validation error appears to the left half-off the page.

This is not a functional problem of course, but I've been wondering if there's a way to have the validation engine ignore hidden elements.

So far I've tried class="validate[optional: Special]" as pointed out on the creator's blog: "optional: Special: Only validate when the field is not empty *Please call optional first". It doesn't seem to work as suggested.

<div id="container" style="display: none;">
   ...
   <select id="mapLocation" onchange="moveMapToCenter();" class="validate[optional: Special]" />
   ...
</div> 

I've also tried using jquery.validate "ignore":

$(document).ready(function() {
   $("#aspnetForm").validationEngine({
      ignore: ":hidden"
      success: false,
      failure: function() {}
   })
});

This may be a simple oversight on my part, we'll see! Thanks.

Answer 1

I ended up solving this by adding and removing the validation[required] class attribute through functions that hide and show the element.

function showContainer() {
   ...
   $("#mapLocation").addClass("validate[required]");
   ...
}
function hideContainer() {
   ...
   $("#mapLocation").removeClass("validate[required]");
}

This works fairly well to avoid validation error messages showing up in strange places when hiding page elements that require validation.

Answer 2

i need disable temporary more fields, i make this, a pretty solution: a little jquery extension:

jQuery.extend(jQuery.fn, {
    switchValidationEngine: function (enable) {
        $.each(this, function (i, n) {
            var field = $(n);
            var rulesParsing = field.attr("class");
            var newVal = enable ? rulesParsing.replace(/validate_not\[/g, "validate[") : rulesParsing.replace(/validate\[/g, "validate_not[");
            field.attr("class", newVal);
        });
    }
});

usage to disable a field validation:

$("#txtModel").switchValidationEngine(false);

usage to re-enable a field validation:

$("#txtModel").switchValidationEngine(true);