Validateur jQuery et une règle personnalisée utilisant AJAX

Question

J'ai lu votre réponse concernant le jQuery validateur où vous décrire une méthode pour vérifier un nom d'utilisateur à l'encontre d'une valeur dans une base de données.

J'ai essayé de la mise en œuvre de cette méthode, mais peu importe, ce qui est retourné à partir du fichier PHP, je reçois toujours le message que le nom d'utilisateur est déjà pris.

Voici sat méthode personnalisée...

$.validator.addMethod("uniqueUserName", function(value, element) {
  $.ajax({
      type: "POST",
       url: "php/get_save_status.php",
      data: "checkUsername="+value,
      dataType:"html",
   success: function(msg)
   {
      // if the user exists, it returns a string "true"
      if(msg == "true")
         return false;  // already exists
      return true;      // username is free to use
   }
 })}, "Username is Already Taken");

Et voici le valider le code...

username: {
    required: true,
    uniqueUserName: true
},

Est-t-il une manière que je suis censé renvoyer le message à partir de php.

Merci

Un

Answer 1

Pour tous ceux qui tombent sur cela, validez la méthode des supports «à distance», qui n’existait peut-être pas en 2010:

http://docs.jquery.com/Plugins/Validation/Methods/remote

 $("#myform").validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: {
        url: "check-email.php",
        type: "post",
        data: {
          username: function() {
            return $("#username").val();
          }
        }
      }
    }
  }
});
 

Answer 2

Vous faites une requête AJAX, ergo: la validation est déjà fini de travailler lors de votre validateur personnalisé renvoie vrai ou faux.

Vous aurez besoin de travailler avec des async. Voir aussi ce post: http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-req

Quelque chose comme:

function myValidator() {
   var isSuccess = false;

   $.ajax({ url: "", 
            data: {}, 
            async: false, 
            success: 
                function(msg) { isSuccess = msg === "true" ? true : false }
          });
    return isSuccess;
}

Answer 3

Il m'a fallu une éternité pour comprendre comment obtenir un jsonified chaîne contenant la valeur d'un élément dans la page en la demande à distance - c'est le résultat d'une combinaison de beaucoup d'heures et d'essayer de nombreux résultats de recherche.

Points clés:

1. async:false, a été déprécié,

2. l'appel de la fonction juste après à distance: c'est la clé pour la création de la chaîne de données avec la valeur de l'élément. Essayez d'accéder à une valeur actuelle de la forme après de données:' a retourner une valeur vide pour le champ avec le type de données défini comme json.

       $("#EmailAddress").rules("add", {
       required: true,
       remote: function () { //the function allows the creation of the data string // outside of the remote call itself, which would not return a current value from the form.
           var emailData = "{'address':'" + $('#SignupForm :input[id$="EmailAddress"]').val() + "'}";
           var r = {
               url: "foobar.aspx/IsEmailAvailable",
               type: "post",
               dataType: "json",
               contentType: "application/json; charset=utf-8",
               cache: false,
               data: emailData,
               dataFilter: function(response) {
                   this.email_run = true; //fix for race condition with next button
                   return isAvailable(data); //return true or false
               }
           };
           return r;
       },
       messages: {
           remote: "* Email in use"
       }
   });
   

.Page ASPX:

<input id="EmailAddress" required name="Email" type="email" placeholder="Email Address*" runat="server"/>

Code C# Derrière:

[WebMethod]
    public static object IsEmailAvailable(string address){...}

Le formatage de la réponse de l'objet:

function isAvailable(data) {
    var response = JSON.parse(getJsonObject(data));
    return (response.isAvailable === "True") ? true : false;
};

//transform response string to a JavaScript Object()
//http://encosia.com/never-worry-about-asp-net-ajaxs-d-again/ 
function getJsonObject(data) {
    var msg = eval('(' + data + ')');
    if (msg.hasOwnProperty('d'))
        return msg.d;
    else
        return msg;
};