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:

<div class="price-row">
    <span>A-text</span>
    <input type="text" id="input-A" name="A" required>
</div>
<div class="price-row">
    <span>B-text</span>
    <input type="text" id="input-B" name="B" required>
</div>
<div class="price-row">
    <span>C-text</span>
    <input type="text" id="input-C" name="C" required>
</div>
<div class="price-row">
    <span>D-text</span>
    <input type="text" id="input-D" name="D" required>
</div>
<div class="price-row">
    <span>E-text</span>
    <input type="text" id="input-E" name="E" required>
</div>
<div class="price-row">
    <span>F-text</span>
    <input type="text" id="input-F" name="F" required>
</div>

And the rules are as follows:

If A has a value, then B must also have a value. And vice versa. If C, D, E or F has a value, then every input has got to have a value.

A value here means "has text of length > 0". But in reality, I also check some validity (is it a number, is it a valid e-mail address, etc.)

I have tried to validate the first set of rules, the ones pertaining to A and B, but this does not work:

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

My thinking is that the above "depends" statement should make sure that the page only validates if the function called returns True. But I can submit the form even if one of the text areas has text and the other doesn't.

Why is this, and what should I do instead?

回答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.

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

来源：https://stackoverflow.com/questions/28139282/jquery-validate-how-to-validate-that-all-or-none-of-a-group-of-textboxes-have-v

标签

javascript

jquery

html

jquery-validate