conditional form validation using jquery.validate.js plugin

Question

Can anyone tell me how to write a rule that validates if neither one radio button option nor the (optinal) textfield is chosen/filled by a user? The rule should only give a message if no checkbox option #myradiogroup is chosen AND the textfield #email2 is empty.

My form code:

<form name="my" id="myForm" action="" method="post">

<input type="radio" name="myradiogroup" id="myradiogroup" value="option 1" /> option 1
<input type="radio" name="myradiogroup" id="myradiogroup" value="option 2" /> option 2

<label for="emailNew4use">this is an optional field:</label>
<input type="text" name="email2" id="email2" />

<input type="submit" value="send">

</form>

it would have been really helpful if you had been much clearer in what you were expecting as an answer — hima
– hima, Commented Sep 19, 2013 at 15:42

Community · Accepted Answer · 2017-05-23 12:25:36Z

5

The required parameter in jQuery Validate can take a function.

$('#myForm').validate({
    rules: {
        email2: {
            required: function(element) {
                if ($('[name="myradiogroup"]:checked').length) {
                    return false;
                } else {
                    return true;
                }
            }
        },
        myradiogroup: {
            required: function(element) {
                if ($('#email2').val()) {
                    return false;
                } else {
                    return true;
                }
            }
        }
    }
});

Here's a condensed version from Sparky

$('#myForm').validate({
    rules: {
        email2: {
            required: function(element) {
                return !$('[name="myradiogroup"]:checked').length;
            }
        },
        myradiogroup: {
            required: function(element) {
                return !$('#email2').val();
            }
        }
    }
});

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Sep 19, 2013 at 15:11

Evan Davis

36.7k7 gold badges53 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sparky Over a year ago

You should be able to condense it all down by replacing the entire if/else. Example: return !($('[name="myradiogroup"]:checked').length);

Evan Davis Over a year ago

@Sparky excellent point! I think it can be made even shorter with dependency strings (you can provide a selector to match) but I can't get that to work... and I have real work to do at the office today, so I'll leave it at that. :)

Sparky Over a year ago

I've had mixed results using the depends method.

Striver · Accepted Answer · 2013-09-19 15:04:01Z

-2

maybe can this:

$('#myForm').submit(function() {
    if($('input:radio').val() == '' || $('#email2').val() == '') {
        preventDefault();
        // show error
    }
}

answered Sep 19, 2013 at 15:04

Striver

15 bronze badges

1 Comment

hima Over a year ago

Is'nt michbeck looking for jquery validation?

Collectives™ on Stack Overflow

conditional form validation using jquery.validate.js plugin

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related