.post inside jQuery.validator.addMethod always returns false

Question

I am very new to jQuery and javascript programming. I have a program below that checks if a username is taken or not. At the moment, the PHP script always returns

if(isset($_POST["username"]) )//&& isset($_POST["checking"])) { $xml="<register><message>Available</message></register>"; echo $xml; } 

The login function works, but the username check fails. Any ideas? Here is my code:

 $(document).ready(function() { jQuery.validator.addMethod("checkAvailability",function(value,element){ $.post( "login.php" , {username:"test", checking:"yes"}, function(xml){ if($("message", xml).text() == "Available") return true; else return false; }); },"Sorry, this user name is not available"); $("#loginForm").validate({ rules: { username: { required: true, minlength: 4, checkAvailability: true }, password:{ required: true, minlength: 5 } }, messages: { username:{ required: "You need to enter a username." , minlength: jQuery.format("Your username should be at least {0} characters long.") } }, highlight: function(element, errorClass) { $(element).fadeOut("fast",function() { $(element).fadeIn("slow"); }) }, success: function(x){ x.text("OK!") }, submitHandler: function(form){send()} }); function send(){ $("#message").hide("fast"); $.post( "login.php" , {username:$("#username").val(), password:$("#password").val()}, function(xml){ $("#message").html( $("message", xml).text() ); if($("message", xml).text() == "You are successfully logged in.") { $("#message").css({ "color": "green" }); $("#message").fadeIn("slow", function(){location.reload(true);}); } else { $("#message").css({ "color": "red" }); $("#message").fadeIn("slow"); } }); } $("#newUser").click(function(){ return false; }); 

});

Answer 1

You need to use the extended form of $.post() , which is $.ajax() , so you can set the async parameter to false, for example:

 jQuery.validator.addMethod("checkAvailability",function(value,element){ $.ajax({ url: "login.php", type: 'POST', async: false, data: {username:"test", checking:"yes"}, success: function(xml) { return $("message", xml).text() == "Available"; } }); },"Sorry, this user name is not available"); 

Currently, your success function, which parses the response, has after , the completion is completed, since this is an asynchronous operation. Therefore, it currently does not return anything while the return value is being used, and undefined ~ = false , so it always looks false. By setting async to false , you let the code run in order without a callback, so the return in the example above is actually used.

Another alternative, if you can customize the page return structure, is to use the remote plugin's built-in module, which is designed for just this kind of thing :)

Answer 2

This is normal, and now we are working. Here is the code:

 $(document).ready(function() { jQuery.validator.addMethod("checkAvailability",function(value,element){ var x= $.ajax({ url: "login.php", type: 'POST', async: false, data: "username=" + value + "&checking=true", }).responseText; if($("message", x).text()=="true") return true; else return false; },"Sorry, this user name is not available"); $("#loginForm").validate({ rules: { username: { required: true, minlength: 4, checkAvailability: true }, password:{ required: true, minlength: 5 } }, messages: { username:{ required: "You need to enter a username." , minlength: jQuery.format("Your username should be at least {0} characters long.") } }, highlight: function(element, errorClass) { $(element).fadeOut("fast",function() { $(element).fadeIn("slow"); }) }, success: function(x){ x.text("OK!") }, submitHandler: function(form){send()} }); function send(){ $("#message").hide("fast"); $.post( "login.php" , {username:$("#username").val(), password:$("#password").val()}, function(xml){ $("#message").html( $("message", xml).text() ); if($("message", xml).text() == "You are successfully logged in.") { $("#message").css({ "color": "green" }); $("#message").fadeIn("slow", function(){location.reload(true);}); } else { $("#message").css({ "color": "red" }); $("#message").fadeIn("slow"); } }); } $("#newUser").click(function(){ return false; }); }); 

Answer 3

OK, maybe this is not so important, but I had a similar problem. I did not do anything with the return value, I just returned it. And that was always true. So, after some shaking, I realized that the value from the server appeared as a string for verification. If it were not an empty string, it would return. So the solution was to use eval ();

Example:

 jQuery.validator.addMethod("checkAvailability",function(value,element){ return eval($.ajax({ url: "/check", async: false, data: { field: $('#element').attr('name'), val: value } }).responseText); }, "error");