Come estendere la validazione URL jquery.validate?

Question

Ho bisogno che gli utenti siano in grado di creare URL parziali senza dover digitare l'URL completo ogni volta.

Ad esempio, supponiamo di pianificare l'URL www.example.com/areas/{userinput}/home. Voglio che l'utente sia in grado di inserire del testo in una casella di testo e voglio verificare che sia un URL valido.

l'URL funzioni validatore come questo:

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

ho tentato di aggiungere un metodo di convalida al validatore tramite il seguente:

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

Tuttavia, quando il modulo viene convalidato e la mia estensione si chiama, continuo a ricevere questo errore:

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 sembra essere un metodo sull'oggetto $.validator ma non riesco a capire come chiamare il metodo url del validatore.

Answer 1

jQuery convalida Plugin - 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); 
}); 

Poi:

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

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

Answer 2

sono riuscito a farlo funzionare senza errori, ecco il codice JS che ho usato:

$(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 } 
     } 
    }); 

});​ 

si può vedere in azione sulla this JSFiddle.