Extend Validation jQuery plugin with custom method

Question

I added a special verification method to verify the password. However, it doesn't matter if there is JSON that I get:

{"success":true} 

or:

 {"success":false} 

The field password is never verified.

 $(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'm doing wrong?

Answer 1

What you are doing wrong is that when you add your own method, you will never return true or false to it. You return it in 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 can 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 .