How can you use type="url" in MVC4 without jQuery validating the field as a URL?

Question

Here's the situation: I have a great big text input box for a URL here: https://asafaweb.com

This doesn't need to adhere to the strict definition of a URL though; I allow addresses without a scheme then default to HTTP for usability purposes. For example, "stackoverflow.com" would be considered a valid URL. But there are also URLs which I don't want to allow for various reasons (i.e. they've been blacklisted or they're internal IP address ranges).

I want to set the type of the input to "url" rather than the default "text" so users on mobile devices get a keyboard designed for the URL context (i.e. iOS gives you a ".com" button), The problem is that as soon as I do this, the default unobtrusive jQuery validation bundled with ASP.NET MVC expects a URL with a scheme thus breaking my schemeless URL support.

This is an MVC4 site and I have an HTML helper like so:

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

The ScanUrl attribute then has a custom ValidationAttribute which does all the bespoke checks to make sure that URL can be scanned.

How can I keep the existing validation pattern without jQuery validation interjecting and wanting to make sure a URL is, well, a strict URL?

Answer 1

If you don't need the strict URL validation anywhere in this site, modifying how jQuery Validation validates URLs might be the easiest way to handle that. You'll find that on line 1034 of jquery.validate.js if you're using the version that ships with MVC 4.

You could tweak the regex right there in the plugin script, or you could patch the url validation method after jQuery Validation is loaded:

<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>

The main advantage to patching it afterward being that you aren't tied to your tweaked version of the script and could update jQuery Validation itself later without losing your customized url validator. That's probably obvious to you, but may be helpful to others finding this answer later.