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

Question

I have an HTML form submitting via AJAX. So, one of the fields is:

<input type="url">

And by default, Chrome asks for the value of this field to be in the following format:

http://example.com

As I use bootstrap, I have the following input field visible: watch this screenshot.

I want user to enter the URL without the HTTP/HTTPS prefix, but in that case Chrome argues that it is not a valid URL.

What may the solution be? How could I make the browser think that the URL string does not need http prefix?

P.S. I use type="url" in order to make it easier to enter page addresses from Android/iOS devices.

Use a `pattern` attribute and specify a regular expression that does not require the protocol. — SeinopSys, Sep 11 '14 at 14:31
Do you have to use the URL input type? Use `type="text"` instead? — Luke, Sep 11 '14 at 14:31
possible duplicate of [With HTML5 url input validation assume url starts with http://](http://stackoverflow.com/questions/17946960/with-html5-url-input-validation-assume-url-starts-with-http) — Ron van der Heijden, Sep 11 '14 at 14:35
Is this a bug (oversight) in chrome? Spec says http://www.w3.org/TR/html5/forms.html#url-state-(type=url) valid url, a valid url contains any (valid) scheme, doesn't it? — Mardoxx, Sep 11 '14 at 14:43
I don't think that's a bug, but, in my opinion, definitely useless function. Correct me if I'm wrong — Artem Ushakov, Sep 11 '14 at 14:49
By the way, the comment about the `pattern` should be the answer. I've just added a `pattern="^[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(/\S*)?$"` and it made my day! Thank you, @DJDavid98 — Artem Ushakov, Sep 11 '14 at 14:50

AlienDev · Answer 1 · 2014-09-11T14:43:06.047

1

EDITED:

There isn't to many options in this case. You essentially have two choices. Don't use type="url", which you already said you need to use. Or don't validate it using this method:

<input type="url" name="someUrl" novalidate="novalidate">

If you absolutely need to validate it, you could write a custom validation script. or use something like JQuery Validate.

edited Sep 11 '14 at 14:43

answered Sep 11 '14 at 14:32

AlienDev

333
2
16

1

Could always remove `type="url"` and put `pattern=(?:(?:https?:\/\/)?|(?:www\.))[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b(?:[-a-zA-Z0-9@:%_\+.~#?&/=]*)` :P – Mardoxx Sep 11 '14 at 14:49
He doesn't want to not use the type. – AlienDev Sep 11 '14 at 14:50
1

Yeah, I was just showing how ridiculous the regex would be!! :) – Mardoxx Sep 11 '14 at 14:51
It is ridiculous, but it solves the problem perfectly without any JS. There are some users with JS switched off, so it won't be the perfect one – Artem Ushakov Sep 11 '14 at 14:55
Those were details that were left out of the question Mr. Ushakov. I'm glad you got your answer though. – AlienDev Sep 11 '14 at 14:58

score 1 · Answer 2 · edited May 23 '17 at 12:05

This isn't a problem with the browser. It's the validation of the HTML5 input type. There are two solutions that you can implement. You can use

<input type="url" novalidate="novalidate" />

The second option is to use JavaScript to add the http:// to the field onsubmit if it isn't there. I've been trying to make it work with the type="URL" onsubmit, but the HTML5 validation kicks in before the JavaScript. Your best option, if you want to keep it that type will be a script executed by onkeyup: http://jsfiddle.net/gLN6X/1/ (posted at https://stackoverflow.com/a/17947355/3869056)

If you can do away with the type for one that doesn't have a default validation, you can use something like this: http://jsfiddle.net/u958xwr5/1/

<html>
 <head>
  <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script>
   $(document).ready(function() {
    $('#urlForm').submit(function() {
     var url = $('#address');
     if(url.val().match(/^http:\/\//) == null) {
      url.val("http://" + url.val());
     }
    });
   });
  </script>
 </head>
 <body>
  <form id="urlForm">
   <input id="address" type="text" />
   <button type="submit">Submit</button>
  </form>
 </body>
</html>

The JSFiddle has a little extra to show that after the correction has been made, it'll be submitting the correct information.

score 0 · Answer 3 · answered Sep 11 '14 at 14:37

0

if you don't want the browser validation (it can vary between browsers) you can add the following novalidate attribute

<input type="url" name="someUrl" novalidate="novalidate">

answered Sep 11 '14 at 14:37

Anant Dabhi

10,864
3
31
49

score 0 · Accepted Answer · answered Sep 11 '14 at 16:02

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.

Thank you for the answer! Yeah, I know that `http://` is a protocol part, but not a "prefix". And I know what it is intended for. This is also a very good tip concerning user experience, when the user copies the URL of the page - I will think about it, much appreciated :) But in my particular case this field is intended for entering the URL of the their own pages. — Artem Ushakov, Sep 11 '14 at 18:10

score 0 · Answer 5 · edited May 23 '17 at 10:26

According to the OP, the issue was solved by using the HTML5 pattern attribute with the appropriate regular expression on the <input>, like so:

<input type="url" pattern="^[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(/\S*)?$">

I'd like to add that this is not necessarily the best solution. It's hard to find the exact regular expression that will work for everyone, every time. If you have to use such explicit validation, I suggest you to listen to users' feedback, and alter the regular expression if necessary.

Personally, I don't do much validation on the URL inputs, that way the user will have the freedom of using any domain not just the good ol' example.com. Also, URLs can also be in the form of an IP address, like http://127.0.0.1/ or not have a dot in them, like http://localhost/. I just find it easier to allow whatever the user enters into the text box, obviously escaping the value as needed if it's being stored in a database.

As a closing word, I'd like to point out the fact that you shouldn't rely on the competence of the users. Why? Well, despite that http:// being in front of that input, lazy people (including me) will probably just paste the URL they CtrlC'd from the browser's address bar, and forget about removing that protocol from the beginning, hoping that the site would automatically do it for their own convenience. You should also take this into account when creating the input's validation, because it might throw off some people who just pasted a valid URL into your input, and it tells them that it's wrong.

Hm... I do not need to validate the URL at all. See the question: the `type=url` is set in order to make the input easier for Android/iOS devices. The whole validation process is being undertaken by server-side, no worries. And in this particular case, `google.co.uk` works perfectly fine - just tested it. But thank you anyways for the answer - it is extremely useful. — Artem Ushakov, Sep 11 '14 at 18:29
@ArtemUshakov You're right, I didn't notice the `.` in the first capture group, so sub-domains like that should work indeed. — SeinopSys, Sep 12 '14 at 09:20

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

5 Answers5