Comment étendre jquery.valider l'URL de validation?

J'ai besoin pour que les utilisateurs soient en mesure de créer partielle Url sans avoir à taper l'URL complète à chaque fois.

Par exemple, dire que j'ai un plan sur l'url en cours de www.example.com/areas/{userinput}/home. Je veux que l'utilisateur soit en mesure d'entrer du texte dans une zone de texte et je veux valider le fait que c'est une URL valide.

L'URL du programme de validation des fonctions comme ceci:

url: function(value, element) {
        return this.optional(element) || /giantregex/.test(value);
}

J'ai tenté l'ajout d'une méthode de validation pour le programme de validation par le suivant:

$.validator.addMethod("exturl", function(value) {
    return $.validator.methods.url.call($.validator, "http://www.example.com/areas/" + value + "/home");
});

Toutefois, lorsque le formulaire est validé et mon extension est appelée, je reçois cette erreur:

Uncaught TypeError: Object function (d,a){this.settings=b.extend(true,{},b.validator.defaults,d);this.currentForm=a;this.init()} has no method 'optional'

optional semble être une méthode sur la $.validator objet, mais je ne peux pas comprendre comment appeler le validateur méthode d'url.

OriginalL'auteur scottm | 2012-10-17

  1. 16

    Plugin jQuery Validation - v1.11.0 

    jQuery.validator.addMethod("complete_url", function(val, elem) {
    //if no url, don't do anything
    if (val.length == 0) { return true; }

    //if user has not entered http://https://or ftp://assume they mean http://
    if(!/^(https?|ftp):\/\//i.test(val)) {
        val = 'http://'+val; //set both the value
        $(elem).val(val); //also update the form element
    }
    //now check if valid url
    //http://docs.jquery.com/Plugins/Validation/Methods/url
    //contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
    return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(val);
});

    Alors:

    $("#form1").validate({
    rules: {
        complete_url:true
    }
});

    De http://www.robsearles.com/2010/05/jquery-validate-url-adding-http/

    if(!/^(https?|ftp):\/\//i.test(val)) { Cette ligne est commentée comme raison de //
    Donc, il n'y a pas de possibilité de le ci-dessus est exactement
    Ce code ne fonctionne pas.
    Votre code est manquant this.optional(element)... de jolies choses importantes. Sans elle, vous ne pouvez pas laisser ce champ vide, même quand vous souhaitez que le champ soit en option!

    OriginalL'auteur Barno

  2. 2

    J'ai réussi à le faire fonctionner sans erreurs, voici le code JS que j'ai utilisé:

    $(document).ready(function(){

    function validateURL(value){
      //URL validation from http://stackoverflow.com/questions/3809401/what-is-a-good-regular-expression-to-match-a-url
      var expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
      var regex = new RegExp(expression);
      return value.match(regex);
    }

    $.validator.addMethod("urlvalidation", function(value, element) {
      return this.optional(element) || validateURL(value);
    }, "URL is not valid");

    $('#frm_validation').validate({
      rules : {
          urlvalidation : { urlvalidation : true }
      }
    });  

});​

    Vous pouvez le voir en action sur cette JSFiddle.

    Il faut quand même que je copie les regex. Il doit être possible de créer mon url à partir de la saisie de l'utilisateur avant de valider que c'est une URL valide et puis l'appel de l'URL interne méthode de validation pour valider ma chaîne formatée.
    Ok, je ne comprenais pas que l'exigence est d'éviter de copier les regex. Dans ce cas, pourquoi n'appelez-vous pas votre URL de validation en fonction de la façon return this.optional(element) || urlValidationFunction(value)?
    C'est exactement ce que j'ai fait et décrites dans la question. J'ai fini avec les erreurs aussi dans la question.
    J'ai édité ma réponse, dites-moi si elle répond à vos exigences.
    De toute façon l'homme ...mais votre réponse est correcte....thnx bro

    OriginalL'auteur Olivier Payen