.post à l'intérieur jQuery.validator.addMethod retourne toujours faux

Question

Je suis très nouveau à la programmation jQuery et javascript. J'ai un programme ci-dessous qui vérifie si le nom d'utilisateur est pris ou non. Pour l'instant, le script PHP retourne toujours

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

La fonction de connexion fonctionne, mais pas la vérification du nom d'utilisateur. Des idées? est ici tout mon 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

Vous devez utiliser la forme élargie de $.post() qui est $.ajax() de sorte que vous pouvez définir l'option async false, comme ceci:

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"); 

Actuellement, votre fonction success qui analyse la réponse se après la validation finit, car c'est une opération asynchrone. Donc actuellement, il ne retourne rien au moment où la valeur de retour est utilisée, et undefined ~ = false, c'est pourquoi il semble toujours faux. En définissant async sur false, vous laissez le code s'exécuter dans l'ordre sans le rappel, de sorte que le retour dans l'exemple ci-dessus est réellement utilisé.

Une autre alternative, si vous pouvez régler votre structure de retour de la page est d'utiliser intégré dans le plugin de validation remote option, ce qui est juste pour ce genre de chose :)

Answer 2

Il est OK, et travaille maintenant. Voici le 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, ce n'est peut-être pas très pertinent mais j'ai eu un problème similaire. Je n'ai rien fait avec la valeur de retour, je viens de le retourner. Et c'était toujours vrai. Donc, après quelques recherches, j'ai pensé que la valeur du serveur apparaissait comme une chaîne pour le validateur. Tant que ce n'était pas une chaîne vide, cela reviendrait vrai. Donc la solution était d'utiliser eval();

Un exemple:

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