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

Pour quelqu'un d'autre qui tombe sur ce, valider prend en charge à distance de méthode, qui ne peut pas avoir existé 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();
          }
        }
      }
    }
  }
});

Voici ma "vieille école" bidouille...

Ci-dessous une fonction d'utilité qui permet l'utilisation de "asynchrone" validations avec des "jquery.validate.js" de la bibliothèque. Cette fonction crée un décalage entre l'utilisateur frappes sinon, la fonction de validation "validFunc" sera appelé "tous les temps", ce qui n'est pas très performatif, dans certaines circonstances, et particulièrement problématique pour les fonctions qui effectuent des validations sur "server-side"/"backend" (appels ajax essentiellement). De cette façon, le "validFunc" validation de la fonction n'est appelée lorsque l'utilisateur arrête de taper pendant une certaine période de temps, ce qui permet aussi un "en temps réel" de validation ("onkeyup": true sur jqv paramètres), comme cela se produit pendant que l'utilisateur est en train de taper.

IMPORTANT: Validations impliquant l'utilisation de la "jqvAsyncValid" la fonction doit toujours être la dernière à éviter les conflits avec les autres en raison de l'asynchronisme.

{
    [...]
    "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

        },
    [...]
}

RÉPONSE CODE:

//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"];
}