With HTML5 Url Input Validation Assume Url Starts with Http://

With HTML5 url input validation assume url starts with http://

The code for this should not interrupt the user's action, but should instead wait until the user leaves the form field to check the input text for "http". So use "onblur" instead of "onkeyup".

Then, just see if the string contains "http" using indexOf. If not, it will return -1, which is falsey.

function checkURL (abc) {  var string = abc.value;  if (!~string.indexOf("http")) {    string = "http://" + string;  }  abc.value = string;  return abc}

<form>  <input type="url" name="someUrl" onblur="checkURL(this)" />  <input type="text"/></form>

Make Chrome not to ask for 'http://' in input

By definition, <input type="url"> represents a control for editing a single absolute URL. An absolute URL contains a protocol part; it is not an omissible “prefix”. Whether a browser has a way of prefixing user input with a default protocol part like http:// is a different issue, and at the discretion of the browser vendor.

Some people might consider using a prefilled part as in <input type="url" value="http://">, but this has several problems. It means setting an initial value that is invalid, which is confusing. It also makes it more difficult to the user to use the natural method of copy and paste.

The conclusion is that if you want a URL as input from the user, you should expect them to provide a full absolute URL.

input type =url for relative URLs

It says, "While the value of the element is not a valid absolute URL, the element is suffering from a type mismatch."

What regular expression does a browsers use for HTML5 input type=url?

Read the regarding specification at http://www.w3.org/TR/html5/forms.html#url-state-(type=url):

Your polyfill should start with sanitizing the input, i.e. removing linebreaks and trimming the string. The sentence "User agents must not allow users to insert "LF" (U+000A) or "CR" (U+000D) characters" might also be interesting.

The results should be a valid, absolute URL. The there referenced RFCs 3986 and 3987 will be describing the URL validation, the section about parsing URLs may be as well interesting.

Your polyfill might not only validate URIs, it also may resolve relative URIs. At least, validating a URI will be much simpler with an algortihm instead of finding an appropriate regexp. Yet, even the RFC mentions a regexp for parsing a already validated URI in appendix B.

Flask-WTF validate() method shouldn't override other validations?

When rendered, a wtforms.UrlField creates an <input type="url"> element. Modern browsers will only accept valid absolute or relative urls in a url input element. A string like 'google.com' is not a valid absolute or relative url (it's a hostname), so the browser will not let you type it into the input.

To get around this, use a StringField instead of a UrlField so that an <input type="text"> is rendered, and the browser does not perform any validation.

class BookmarkForm(FlaskForm):
    url = StringField('url', validators=[DataRequired(), url()])
    description = StringField('description')

See also the answers to this question for some possible solutions on the browser side.

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

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.

Why does the regular expression not validate the website URL properly?

It seems you want a simpler regex for your task. So I am modifying your regex only. While this will work for most URLs but will also fail at some places

/https?:\/\/(www\.)?(?!www\.)([A-Za-z0-9\-@_~]+\.)[A-Za-z]{2,}(:[0-9]{2,5})?(\.[A-Za-z0-9\/_\-~?&=]+)*/

---

Related Topics