jquery validator - Validating visible elements only

Question

I have a radiobutton that hides/shows a div. All visible elements are \"required\", but adding ignore: \":hidden\" after the validation rules, doesn\'t work... Here\'s the

Answer 1

Please try ignore: ":not(:visible)" instead of ignore: ":hidden".

Answer 2

You can specify dependency expressions in your required rules to have them ignore the elements if they're not visible:

$("#myForm").validate({
    rules: {
        name: "required",
        age: {
            required: "#age:visible"
        },
        height: {
            required: "#height:visible"
        }
    }
});

You can see the results in this fiddle.

EDIT: ignore will also work, but it's an option, not a rule, so you should write:

$("#myForm").validate({
    ignore: ":hidden",
    rules: {
        name: "required",
        age: "required",
        height: "required"
    }
});