Jquery Validate: How To Validate That All Or None Of A Group Of Textboxes Have Values?

I have a form consisting of a couple of dozen labels and textboxes. But for simplicity's sake, let's say I have only six such items:

A

Solution 1:

Your code...

rules: {
    A: {
        depends: function(element) {
            ....
        }
    }
}

There is no such thing as a depends rule.

depends is a property that goes under an existing rule in order to "apply the rule only in certain conditions".

rules: {
    A: {
        required: {
            depends: function(element) {
                // return true or false here
            }
        }
    }
}

Whenever the depends function returns true, the associated required rule is activated.

That being said, the function/logic is flawed...

depends: function(element) {
    ($("#input-A").val().length > 0) == ($("#input-B").val().length > 0);
}

• You need a return statement.
• You can't use ($("#input-A").val().length > 0) as part of the depends function under required for input A because it will always evaluate to false. It always starts off empty, right? (Besides, it doesn't make sense to change the field's rule based upon the same field's own content... you'd probably never be able to satisfy this rule.)

---

Try something more like this...

rules: {
    A: {
        required: {
            depends: function(element) {
                return $("#input-B").is(':filled');
            }
        }
    },
    B: {
        required: {
            depends: function(element) {
                return $("#input-A").is(':filled');
            }
        }
    }
}

depends will return true if B is filled out and activate the required rule on A. The same logic is applied to field B.

Working DEMO: http://jsfiddle.net/t9y2x3jf/

NOTE: You must remove any inline HTML5 required attributes from your input elements, otherwise, these will over-ride your depends logic.

<inputtype="text"id="input-A" name="A" />

Share