web-dev-qa-db-fra.com

validateur jQuery et une règle personnalisée qui utilise AJAX

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

J'ai essayé d'implémenter cette méthode mais peu importe ce qui est retourné par le fichier PHP je reçois toujours le message que le nom d'utilisateur est déjà pris.

Voici cette 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 code de validation ...

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

Existe-t-il un moyen spécifique que je suis censé renvoyer le message de php.

Merci

UNE

jqueryajaxvalidationjquery-validate
49
thatweblook

Vous effectuez une requête AJAX, ergo: la validation est déjà terminée lorsque votre validateur personnalisé renvoie true ou false.

Vous devrez travailler avec async. Voir aussi cet article: Comment puis-je faire en sorte que jQuery effectue une requête Ajax synchrone plutôt qu'asynchrone?

Quelque chose comme:

function myValidator() {
   var isSuccess = false;

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

Avertissement:

Depuis jQuery 1.8, l'utilisation de async: false avec jqXHR ($ .Deferred) est déconseillée; vous devez utiliser les options de rappel succès/erreur/complet au lieu des méthodes correspondantes de l'objet jqXHR telles que jqXHR.done () ou le jqXHR.success () déconseillé.

60
Jan Jongboom

Pour toute autre personne qui tombe dessus, validez prend en charge la méthode "distante", qui n'existait peut-être pas en 2010:

https://jqueryvalidation.org/remote-method/

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

Il m'a fallu une éternité pour comprendre comment obtenir une chaîne jsonified contenant la valeur d'un élément de la page dans la requête distante - c'est le résultat d'une combinaison de plusieurs heures et d'essais de nombreux résultats de recherche.

Points clés:

  1. async:false est obsolète,

  2. l'appel de fonction juste après remote: est la clé pour créer la chaîne de données avec la valeur de l'élément. Essayer d'accéder à une valeur actuelle du formulaire après data: renvoyait une valeur vide pour le champ avec dataType 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){...}

Formatage de l'objet de réponse:

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;
};
11
JnJnBoo

Voici mon hack "old school" ...

Ci-dessous une fonction utilitaire qui permet l'utilisation de validations "asynchrones" avec la bibliothèque "jquery.validate.js". Cette fonction crée un délai entre les frappes des utilisateurs sinon la fonction de validation "validFunc" sera appelée "tout le temps" ce qui n'est pas très performant dans certaines circonstances et surtout problématique pour les fonctions qui effectuent des validations sur "côté serveur"/"backend" (ajax appelle essentiellement ). De cette façon, la fonction de validation "validFunc" n'est appelée que lorsque l'utilisateur arrête de taper pendant une certaine période de temps, ce qui permet également une validation "en temps réel" ("onkeyup": true sur les paramètres jqv) tel qu'il se produit lorsque l'utilisateur tape.

IMPORTANT: Les validations impliquant l'utilisation de la fonction "jqvAsyncValid" doivent toujours être les dernières pour éviter les conflits avec les autres en raison de l'asynchronie.

{
    [...]
    "rules": {
        "field_name": {
            "required": true,
            "maxlength": 12,
            "minlength": 4,

            // NOTE: Validation involving the use of the "jqvAsyncValid" function. By Questor
            "my_custom_ajax_validation": true

        },
    [...]
}

CODE DE RÉPONSE:

// NOTE: Adds the custom validation "my_custom_ajax_validation". By Questor
$.validator.addMethod("my_custom_ajax_validation", function (value, element) {
    return jqvAsyncValid(element, "my_custom_ajax_validation", myValidationFunc, this);
}, "My error message!");

// NOTE: My validation function. By Questor
function myValidationFunc(domElement) {
    if (someFuncWithAjaxCall(domElement.value) == "ALL_RIGHT!") {
        return true;
    } else {
        return false;
    }
}

// NOTE: Global "json" variable that stores the "status" ("isValid") and cycle control
// ("toCtrl") of asynchronously validated elements using the "jqvAsyncValid" function.
// By Questor
var jqvAsyncVState = {};

// NOTE: A utility function that allows the use of asynchronous validations with
// "jquery.validate.js". This function creates a delay between one user keystroke and
// another otherwise the validation function "validFunc" will be called "all time"
// which is not very performative in some circumstances and especially problematic
// for functions that perform validations on the serverside/backend (ajax calls basically).
// In this way the "validFunc" validation function is only called when the user stops
// typing for a certain period of time, which also allows a "realtime" validation
// as it occurs while the user is typing. By Questor
// [Ref .: https://jqueryvalidation.org/ ]
//. domElement - DOM element informed by jqv in the "addMethod" for the anonymous
// function;
//. asyncRuleNm - Validation name added via "addMethod";
//. validFunc - Function that will do the validation. Must have the signature
// "funcName(domElement)" returning "true" for valid and "false" for not;
//. jQValidInst - Instance of the current jqv within "addMethod". It is usually
// denoted by "this";
//. toInMsecs - "Timeout" in "milliseconds". If not informed the default will be
// 1500 milliseconds. Be careful not to use a very short timeout especially in
// "ajax" calls so as not to overload the serverside/backend.
// Eg.: `return jqvAsyncValid(element, "my_custom_ajax_validation", myValidationFunc, this);`.
function jqvAsyncValid(domElement, asyncRuleNm, validFunc, jQValidInst, toInMsecs) {
    if (typeof toInMsecs === "undefined" || toInMsecs === "") {
        toInMsecs = 1500;
    }
    var domEKey = jQValidInst.currentForm.id + domElement.name;

    // NOTE: The validation messages need to be "displayed" and "hidden" manually
    // as they are displayed asynchronously. By Questor
    function errMsgHandler() {
        if (jqvAsyncVState[domEKey]["isValid"]) {

            // NOTE: If the current error message displayed on the element was that
            // set in the rule added via "addMethod" then it should be removed since
            // the element is valid. By Questor
            // [Ref.: https://stackoverflow.com/a/11652922/3223785 ,
            // https://stackoverflow.com/a/11952571/3223785 ]
            if (jQValidInst.errorMap[domElement.name] == $.validator.messages[asyncRuleNm]) {
                var iMsgNow = {};
                iMsgNow[domElement.name] = "";
                jQValidInst.showErrors(iMsgNow);
            }

        } else {
            var iMsgNow = {};

            // NOTE: If the element is invalid, get the message set by "addMethod"
            // for current rule in "$.validator.messages" and show it. By Questor
            iMsgNow[domElement.name] = $.validator.messages[asyncRuleNm];
            jQValidInst.showErrors(iMsgNow);

        }
    }
    if (!jqvAsyncVState.hasOwnProperty(domEKey)) {

        // NOTE: Set the global json variable "jqvAsyncVState" the control attributes
        // for the element to be asynchronously validated if it has not already been
        // set. The key "domEKey" is formed by the "id" of the "form" that contains
        // the element and the element's "name". By Questor
        jqvAsyncVState[domEKey] = {
            "toCtrl": null,
            "isValid": undefined
        };

    }
    var useOnKeyup = true;

    // NOTE: The "onblur" event is required for "first validation" that only occurs
    // in a "blur" event - this is inherent to jqv - and for situations where the
    // user types very fast and triggers "tab" and the event "onkeyup" can not deal
    // with it. By Questor
    domElement.onblur = function (e) {
        jqvAsyncVState[domEKey]["isValid"] = validFunc(domElement);
        errMsgHandler();
        useOnKeyup = false;
    }
    if (useOnKeyup) {

        // NOTE: The strategy with the event "onkeyup" below was created to create
        // a "delay" between a "keystroke" and another one otherwise the validation
        // function "validFunc" will be called "all time" which is not very performative
        // in some circumstances and especially problematic for functions that perform
        // serverside/backend validations (ajax calls basically). In this way the
        // "validFunc" validation function is only called when the user stops typing
        // for a certain period of time ("toInMsecs"). By Questor
        domElement.onkeyup = function (e) {

            // NOTE: Clear the "toCtrl" if it has already been set. This will
            // prevent the previous task from executing if it has been less than
            // "toInMsecs". By Questor
            clearTimeout(jqvAsyncVState[domEKey]["toCtrl"]);

            // NOTE: Make a new "toCtrl" set to go off in "toInMsecs" ms. By Questor
            jqvAsyncVState[domEKey]["toCtrl"] = setTimeout(function () {
                jqvAsyncVState[domEKey]["isValid"] = validFunc(domElement);
                errMsgHandler();
            }, toInMsecs);
        };
    }
    return jqvAsyncVState[domEKey]["isValid"];
}
0
Eduardo Lucio