Input Type URL - Says "Please enter a URL" if HTTP is not included

Question

I've been working on a form and run into a snag. I've been using input type="url" so that iPad and iPhones etc all pull up the correct keyboard - and to try and follow the new standards.

I've run into an issue though. On a form where the web address is not required - if a user types in www.theiraddress.com most browsers outline it in red/yellow to notify the user they need to enter "http://" before it.

I've used input:invalid css to remove that outline.

However now when the user submits the form, the browser throws an error saying "Please enter a URL".

The field isn't required - I just wanted to make it easier for folks to enter their addresses - but still display the right keyboards on mobile devices etc.

Is there a way to remove this annoying tooltip that prevents users from submitting the form?

Does this answer your question? [Disable validation of HTML5 form elements](https://stackoverflow.com/questions/3090369/disable-validation-of-html5-form-elements) — user202729, Jan 29 '21 at 04:47

score 3 · Accepted Answer · edited Mar 01 '18 at 11:56

3

You can add a novalidate attribute to the form element. Fx:

<form method="post" action="/foo" novalidate>...</form>

See https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

Taken from this answer: https://stackoverflow.com/a/3094185/1497627

edited Mar 01 '18 at 11:56

ÐerÆndi

139
10

answered Jul 06 '15 at 09:12

Ankur Anand

535
2
9

score 1 · Answer 2 · answered Jan 26 '15 at 21:42

According to the bottom of the referenced page (http://www.wufoo.com/html5/types/3-url.html) you can use the text input type and the inputmode attribute (http://www.wufoo.com/html5/attributes/23-inputmode.html) to get to the keyboard on mobile devices without being fussy about the text field.

Yeti82 · Answer 3 · 2015-02-05T17:38:05.353

If I understand correctly, you want that when a user enters the url without http://, automatically adds http:// front of the url so as not to report error

Try this:

//PUT THIS IN HEAD

function check_url(){
    //Get input value
    var elem = document.getElementById("url_input");
    var input_value = elem.value;
 //Set input value to lower case so HTTP or HtTp become http
 input_value = input_value.toLowerCase();
    
    //Check if string starts with http:// or https://
    var regExr = /^(http:|https:)\/\/.*$/m;
    
    //Test expression
    var result = regExr.test(input_value);
 
 //If http:// or https:// is not present add http:// before user input
    if (!result){
  var new_value = "http://"+input_value;
  elem.value=new_value;
    }
}

Try to input www.myurl.com<br />
Try to input http://www.myurl.com<br />
Try to input https://www.myurl.com<br /><br />
URL INPUT:<br />
<input type="url" id="url_input" name="url_input" /><br /><br />
<input type="button" value="Submit!!" onclick="check_url()" />

Replace www.myurl.com with http://www.myurl.com

Nothing happens if http://www.myurl.com or https://www.myurl.com

Note: http://www.myurl.com automatically will be converted in https://www.myurl.com by browser if myurl.com domain support SSL(https:)

Working demo: http://jsfiddle.net/Yeti82/281a4hs8/

score 1 · Answer 4 · answered Mar 14 '12 at 21:47

1

As far as I know, according to the standard, the protocol is required (Url input field implementation state). You could alternatively use a regexp to validate that field such as /^(?:(http|https|ftp):\/\/)?(?:[\w-]+\.)+[a-z]{2,6}(\/)?/i

answered Mar 14 '12 at 21:47

ZenMaster

111
1
5

Input Type URL - Says "Please enter a URL" if HTTP is not included

4 Answers4