Search code examples
htmlsafaricross-browsermicrosoft-edgeurl-validation

HTML5 input URL validation for Edge and Safari

I'm trying to ensure that the user inputs a correct URL within 

<input type='url' >

however have tested a few erroneous test entries that seem to pass as URL only on Edge (40.15063.0.0) and Safari (5.1.7).

e.g:

http://

https://

These tests are prompted "please enter a url" in Chrome and Firefox. How do I improve input type='url' to not accept entries such as this in Edge and Safari?

You can test type url here: https://www.wufoo.com/html5/types/3-url.html

Solution

  • Used the pattern attribute to catch the test cases: http:// https://

    <form action="/action_page.php">
Homepage: <input type="url" name="website" pattern="https?://.+" 
title="Include http://">
<input type="submit">
</form>

    As shown on the last example on W3schools documentation: https://www.w3schools.com/tags/att_input_pattern.asp