Jquery Validate plugin rules method not working

Question

I have a asp.net form where I am trying to use Jquery Validation plugin. I am trying to add the rules using javascript using the rules method. so i tried something like this

$('#btnSave').on('click', function () {
    $("#txtAmount").rules("add", {
        required: true,
        minlength: 2,
        messages: {
            required: "Required input",
            minlength: jQuery.format("Please, at least {0} characters are necessary")
        }
    });
    $('form').validate({
        submitHandler: function (form) {
            form.submit();
        }
    });
});

I have set the ClientIDMode="Static" so that i can use the contorl IDs directly. However, this is not working. Can anyone tell me where is the problem. I can't seem to put my finger on it.

here is a JsFiddle

in your jsfiddle, use this line $("#id1").rules("add", { I will continue testing the jsfiddle. bbiab — JP Hellemons
– JP Hellemons, Commented Oct 30, 2013 at 13:46
@JPHellemons, silly me. just a typo. but it still doesn't work. — th1rdey3
– th1rdey3, Commented Oct 30, 2013 at 13:48
true, expected it to be a small typo. i am looking at your jsfiddle. i am hitting an Shell form does not validate jsfiddle at the moment. — JP Hellemons
– JP Hellemons, Commented Oct 30, 2013 at 13:56

Sparky · Accepted Answer · 2014-12-06 15:24:42Z

Yes, as explained in the accepted answer, you must call .validate() (initialization) before calling the .rules() method.

However:

1) Since .validate() is only the initialization method (only gets called once), there is no need to wrap it inside a click handler. The plugin already automatically captures the click event.

2) In this example case there is no need for a submitHandler that only contains a form.submit() inside, since that's already the default behavior of the submitHandler. Leaving the submitHandler out entirely will yield the same result. Although, if you need to use ajax or perform some other code on submit, then by all means, use the submitHandler.

$(document).ready(function() {

    $('form').validate({
        // other rules and options
    });

    $("#id1").rules("add", {
        required: true,
        minlength: 2,
        messages: {
            required: "Required input"
        }
    });

});

DEMO: http://jsfiddle.net/85KR4/5/ (regular form action called on successful submission)

DEMO 2: http://jsfiddle.net/85KR4/7/ (ajax called on successful submission)

Smileek · Accepted Answer · 2013-10-30 14:01:26Z

4

Everything is correct except the order. At first you should call validate, and just after that you can call rules.

http://jsfiddle.net/85KR4/3/

answered Oct 30, 2013 at 14:01

Smileek

2,9421 gold badge26 silver badges27 bronze badges

3 Comments

th1rdey3 Over a year ago

I should have tried that first. again, silly me. Thanks for your prompt response.

Sparky Over a year ago

Not quite "correct except the order"... the click handler is totally superfluous.

Smileek Over a year ago

@Sparky, you're absolutely right. Didn't notice anything but main mistake - my bad.

Collectives™ on Stack Overflow

Jquery Validate plugin rules method not working

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related