dynamically adding conditional validation using jquery validator

Question

I wanted to add conditional rules dynamically on the page load here is my code what I have tried I have created jsfiddle First code sample

 $("input[name$='DistanceToRespondingFireDept']").rules("add", {
        required: {
            depends: function (element) {
                return $("input:radio[name='DistanceToNearestFireHydrnt']:checked").val() == 'U';
            }
        },
        messages: {
            required: "Tested"
        }
    });

second code

$("input[name$='DistanceToRespondingFireDept']").rules("add", {
        required: function (element) {
            return $("input:radio[name='DistanceToNearestFireHydrnt']:checked").val() == 'U';
        },
        messages: {
            required: "Tested"
        }
    });

I get an error "cannot call method call of undefined"

If I don't add any conditions do just simple required: true it works

Any suggestion how to fix

You don't need <html>, <head> or <body> tags in your jsFiddle; just insert the HTML that's between your <body></body>. — Sparky
– Sparky, Commented Sep 18, 2013 at 15:16
You should also show your full code example in the OP. Otherwise, when the jsFiddle dies, the question will not be as helpful to others. — Sparky
– Sparky, Commented Sep 18, 2013 at 15:37

Sparky · Accepted Answer · 2013-09-19 16:49:08Z

1

You have a syntax error.

The opening brace, {, was missing from here...

if (test === "a") { // <-- this opening brace was missing

Your DEMO: http://jsfiddle.net/TYbS5/4/

You should also update your jQuery Validate plugin to version 1.11.1, which is currently the latest.

And finally, both of your buttons are type="submit" which means the plugin will think they're both for submitting the form. You should change the "CLEAR" button into type="button" in order to prevent the plugin from capturing its click event.

EDIT:

As per comments, here is code for conditional validation...

required: function() {
    return $('#DistanceToNearestFireHydrnt1').is(':checked');
},

Working DEMO: http://jsfiddle.net/TYbS5/5/

edited Sep 19, 2013 at 16:49

answered Sep 18, 2013 at 15:31

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

3 Comments

Divesh Salian Over a year ago

I had updated the JS fiddle but forgot to update it in the question for { error. Secondly this is a dummy form created for testing So have not changed the button type a simple copy paste :-(

Sparky Over a year ago

@diveshsalian, So what's the problem then? Your code is working without error as demonstrated by my jsFiddle.

Divesh Salian Over a year ago

I want to add conditional validation not just required:true I have shared the code sample in question i.e required if selected radiobutton value is U

Collectives™ on Stack Overflow

dynamically adding conditional validation using jquery validator

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related