Wie können Sie verwenden type = „url“ in MVC4 ohne jQuery das Feld als URL zu validieren?

Question

Hier ist die Situation: Ich habe ein großes großes Texteingabefeld für eine URL habe hier: https://asafaweb.com

Dies muss nicht, obwohl die strenge Definition einer URL halten; Ich erlaube Adressen ohne ein Schema dann Standard zu HTTP für Benutzerfreundlichkeit Zwecke. Zum Beispiel würde "stackoverflow.com" als gültige URL betrachtet werden. Aber es gibt auch URLs, die ich aus verschiedenen Gründen nicht zulassen möchte (d. H. Sie wurden auf die schwarze Liste gesetzt oder sie sind interne IP-Adressbereiche).

Ich möchte den Typ der Eingabe auf "url" anstelle der Standard "Text" festlegen, damit Benutzer auf mobilen Geräten eine Tastatur für den URL-Kontext (dh iOS gibt Ihnen eine ".com" -Taste) erhalten, das Problem ist, dass, sobald ich das tue, gebündelt der Standard unaufdringlich jQuery Validierung mit ASP.NET MVC erwartet eine URL mit einem Schema so meine schemeless URL Unterstützung zu brechen.

Dies ist ein MVC4 Ort und ich habe einen Helfer HTML etwa so:

@Html.TextBoxFor(m => m.ScanUrl, new { type = "url" }) 

Das ScanUrl Attribut hat dann eine benutzerdefinierte Validation, die die maßgeschneiderten all Kontrollen tun, um sicherzustellen, dass URL gescannt werden kann.

Wie kann ich das vorhandene Validierungsmuster beibehalten, ohne dass die jQuery-Validierung eingeordnet wird und sichergestellt werden soll, dass eine URL strikt URL ist?

Answer 1

Wenn Sie brauchen nicht die strenge URL-Validierung überall auf dieser Website, zu modifizieren, wie jQuery Validierung bestätigt URLs könnte der einfachste Weg, das zu handhaben. Sie finden das in Zeile 1034 von jquery.validate.js, wenn Sie die mit MVC 4 mitgelieferte Version verwenden.

Sie könnten die Regex genau dort im Plugin-Skript optimieren, oder Sie könnten die URL-Validierung patchen Verfahren nach jQuery Validierung geladen wird: sein

<script src="/Scripts/jquery.validate.js"></script> 
<script> 
    // To no-op url validation completely. 
    jQuery.validator.methods.url = function(value, element) { 
    return this.optional(element) || true; 
    }; 

    // Or, continue validating everything else as previously, 
    // but not require the protocol (double check my change to the regex...). 
    jQuery.validator.methods.url = function(value, element) { 
    return this.optional(element) || /^(((([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(value); 
    };  
</script> 

der Hauptvorteil, um es danach Patchen, dass Sie auf Ihre gezwickt Version des Skripts nicht gebunden sind und jQuery Validation sich später, ohne zu verlieren Ihre individuelle uRL Validator aktualisieren können. Das ist wahrscheinlich für Sie offensichtlich, kann aber für andere hilfreich sein, die diese Antwort später finden.

Answer 2

Sie Javascript automatisch das Schema der URL vorangestellt wird in der Eingabe verwenden könnte, wenn sie auf Fokus aus/Wechsel nicht da ist.

Answer 3

Sie können auch das jQuery Validierung Plugin sagen selektiv Eingabefelder auf einer Auswahl Sie ignorieren weise bestimmt werden, die eine Klasse, die Sie auf alle Elemente hinzufügen könnte zu ignorieren, wie class="ignorejQueryValidate" oder in Ihrem Fall, alle Eingänge mit type="url".

Siehe Abschnitt ignore im jQuery docs des Validierungs-Plugins .

@using (Html.BeginForm("SomeAction", "SomeController", FormMethod.Post, new { id = "myForm"})) 
{ 
    @Html.TextBoxFor(m => m.ScanUrl, new { type = "url", @class = "ignorejQueryValidate" }) 
} 

$("#myForm").validate({ 
    ignore: ".ignorejQueryValidate" 
}); 

oder

@using (Html.BeginForm("SomeAction", "SomeController", FormMethod.Post, new { id = "myForm" })) 
{ 
    @Html.TextBoxFor(m => m.ScanUrl, new { type = "url" }) 
} 

$("#myForm").validate({ 
    ignore: "input[type=url]" 
});