Extend JQuery Validator Plugin with custom method

Question

I added a custom validation method to validate a password. However, it does not matter if the JSON I get is:

{"success":true}

or:

{"success":false}

The field password never validates.

$(document).ready(function () {
    // Ad custom validation
    $.validator.addMethod('authenticate', function (value) {
        $.getJSON("./json/authenticate.do", { password: value }, function (json) {
            return (json.success == true) ? true : false;
        }
        );
    }, 'Wrong password');

    $('form#changePasswordForm').validate({
        rules: {
            repeat_new_password: { equalTo: "#new_password" },
            password: { authenticate: true }
        }, submitHandler: function (form) {
            $(form).ajaxSubmit({
                dataType: "json",
                success: function (json) {
                    alert("foo");
                }
            });
        }
    });
});

Any idea, what I am doing wrong?

Darin Dimitrov · Accepted Answer · 2009-06-24 14:02:04Z

7

What you do wrong is that when you add your custom method you never return true or false from it. You return it in the ajax callback.

$.validator.addMethod('authenticate', function (value) { 
    $.getJSON("./json/authenticate.do",{ password: value }, function(json) { 
        // This return here is useless
        return (json.success == true) ? true : false;
    }); 
    // You need to return true or false here...
    // You could use a synchronous server call instead of asynchronous
}, 'Wrong password');

Instead of adding a custom method you could use the remote function:

$('form#changePasswordForm').validate({
    rules: {
        repeat_new_password: { 
            equalTo: "#new_password" 
        },
        password : { 
            // This will invoke ./json/authenticate.do?password=THEVALUE_OF_THE_FIELD 
            // and all you need to do is return "true" or "false" from this server script
            remote: './json/authenticate.do' 
        }
    }, 
    messages: { 
        password: { 
            remote: jQuery.format("Wrong password")
        }
    },
    submitHandler: function(form) {
        $(form).ajaxSubmit({
            dataType: "json", 
            success: function(json) {
                alert("foo");
            }
        });                     
    }
});

You can check it out in action here.

edited Jun 24, 2009 at 14:02

answered Jun 23, 2009 at 19:23

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

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

5 Comments

Sergio del Amo Over a year ago

you have 7.000 more rep points than me, and less badges. Something is clearly wrong with the badge system.

Sergio del Amo Over a year ago

Thanks for pointing me to the remote function. It is a really elegant solution.

Sergio del Amo Over a year ago

Could you please add the next code snippet to your remote solution to illustrate custom messages for remote: , messages: { password: { remote: jQuery.format("Wrong password") } }

Darin Dimitrov Over a year ago

There's nothing wrong with the reputation system. I have 373 answers and you have 19 answers. My answers don't generate much enough reputation to give me silver or gold badges but they get accepted from the original posters.

Sergio del Amo Over a year ago

I meant the system is wrong against you. You should have more badges than me.

Collectives™ on Stack Overflow

Extend JQuery Validator Plugin with custom method

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related