Conditional Validation using jquery validate

Question

Using jquery-validate 1.11.0

In my form, i have a condition that if text is input in field A, fields B & C become required. If text is input in field B, A & C become required and so on and so forth. Also, if any text is in Field D, clear it out.

If text is input in Field D, then clear fields A, B, C and make them not required.

I have a bug where If I fill out field A first, it seems to submit bypassing the other 2 fields as required. If i fill out field b or c first, it ensures that field A is required.

http://jsfiddle.net/rockitdev/mxtXX/47/

<form id="search" name="search" method="post" action="">
    <label for="a">Text A</label>
    <input id="a" type="text" class="search-person" />
    <label for="b">Text B</label>
    <input id="b" type="text" class="search-person" />
    <label for="c">Text C</label>
    <input id="c" type="text" class="search-person" />
    <label for="d">Text D</label>
    <input id="d" type="text" class="search-hcn" />
    <p>
        <input class="btn btn-primary" type="submit" value="Submit" />
    </p>
</form>

$('.search-person').focus(function () {
    $('.search-hcn').val(' ').removeClass("required");
    $('.search-person').addClass("required");
});

$('.search-hcn').focus(function () {

    $('.search-person').val(' ').removeClass("required");
    $('.search-hcn').addClass("required");
});

$('#search').validate();

so use required validation for all fields.Then it solves the problem — samba
– samba, Commented Apr 24, 2013 at 13:54

Arun P Johny · Accepted Answer · 2013-04-24 14:01:01Z

You can use the depends option provided by validate plugin to do this.

Note: Removing the value is not a part of the validation

$('#search').validate({
    rules: {
        a: {
            required: {
                depends: function(element) {
                    return $('#b').val().length > 0 || $('#c').val().length > 0
                }
            }
        },
        b: {
            required: {
                depends: function(element) {
                    return $('#a').val().length > 0 || $('#c').val().length > 0
                }
            }
        },
        c: {
            required: {
                depends: function(element) {
                    return $('#a').val().length > 0 || $('#b').val().length > 0
                }
            }
        },
        d: {
            required: {
                depends: function(element) {
                    return $('#a').val().length == 0 || $('#b').val().length == 0 && $('#c').val().length == 0
                }
            }
        }
    }
});

Demo: Fiddle

Vimal Stan · Accepted Answer · 2013-04-24 13:59:20Z

3

Setting the name attributes on the input fields solves the problem.

JSFiddle

<form id="search" name="search" method="post" action="">
    <label for="a">Text A</label>
    <input id="a" type="text" class="search-person" name="person1" />
    <label for="b">Text B</label>
    <input id="b" type="text" class="search-person" name="person2" />
    <label for="c">Text C</label>
    <input id="c" type="text" class="search-person" name="person3" />
    <label for="d">Text D</label>
    <input id="d" type="text" class="search-hcn" name="hcn" />
    <p>
        <input class="btn btn-primary" type="submit" value="Submit" />
    </p>
</form>

The debug option is useful for finding such errors.

$('#search').validate({debug: true});

answered Apr 24, 2013 at 13:59

Vimal Stan

2,0151 gold badge12 silver badges14 bronze badges

1 Comment

Sparky Over a year ago

Worth mentioning that the jQuery Validate plugin requires that the name attribute always be present on all input elements.

Collectives™ on Stack Overflow

Conditional Validation using jquery validate

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related