'pattern in html5 input type url validation

I have a form as shown below in which I want the user to enter the url in the input box starting from http:// or https:// with one period to be present after subdomain. If the user doesn't do so it should say "Please match the requested format".

This is what I have tried. The following code takes only from https not http.

<label for="url">Enter an https:// URL:</label>

<input type="url" name="url" id="url" placeholder="https://example.com" pattern="https://.*" size="30" required>  <!-- Line A -->

The pattern which I want is:

  1. https://example.com
  2. http://example.com
  3. https://www.example.com
  4. http://www.example.com

In the first 2 cases, user doesn't type www in the input box and in the last 2 cases user types www In the above four urls, it has atleast one period after subdomain and it starts from http or https.

In short, I want the following 2 requirements to be met when user enters the url in the input box.

  1. It should start from http or https.
  2. It should have at-least one period after sub-domain.

Problem Statement:

I am wondering what changes I should make in the pattern above at Line A so that it meets my requirements.

htmlregexvalidation


Solution 1:[1]

Can probably use url validation segments after the http://

<input type="url" 
  name="url"
  id="url"
  placeholder="https://example.com"
  pattern="[Hh][Tt][Tt][Pp][Ss]?:\/\/(?:(?:[a-zA-Z\u00a1-\uffff0-9]+-?)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]+-?)*[a-zA-Z\u00a1-\uffff0-9]+)*(?:\.(?:[a-zA-Z\u00a1-\uffff]{2,}))(?::\d{2,5})?(?:\/[^\s]*)?"
  required>

Expanded 

 [Hh] [Tt] [Tt] [Pp] [Ss]? :\/\/
 (?:
      (?: [a-zA-Z\u00a1-\uffff0-9]+ -? )*
      [a-zA-Z\u00a1-\uffff0-9]+ 
 )
 (?:
      \. 
      (?: [a-zA-Z\u00a1-\uffff0-9]+ -? )*
      [a-zA-Z\u00a1-\uffff0-9]+ 
 )*
 (?:
      \. 
      (?: [a-zA-Z\u00a1-\uffff]{2,} )
 )
 (?: : \d{2,5} )?
 (?: \/ [^\s]* )?

Solution 2:[2]

I think the pattern below should work for you:

http(s?)(:\/\/)((www.)?)(([^.]+)\.)?([a-zA-z0-9\-_]+)(.com|.net|.gov|.org|.in)(\/[^\s]*)?

You can see it working here

Solution 3:[3]

pattern="^(http(s)?:\/\/)+[\w\-\._~:\/?#[\]@!\$&'\(\)\*\+,;=.]+$"

criteria:
1. start from http or https
2. it can be consist of subdomain

examples:
1. https://www.example.com
2. http://www.example.com
3. https://example.com
4. http://example.com
5. http://blog.example.com

Solution 4:[4]

I believe that this may be the desired pattern?

<label for="url">Enter an https:// URL:</label>

<input type="url" name="url" id="url" placeholder="https://example.com" pattern="http(s?)(:\/\/)((www.)?)([a-zA-z0-9\-_]+)(.com)" size="30" required>
</body>

The pattern, explained:
http
(s?) followed by an optional s on the protocol
(:\/\/) the :// between the protocol and the subdomain
((www.)?) optional www. subdomain
([a-zA-z0-9\-_]+) the second-level domain (the portion after the subdomain (if present) and before the .com) considering alphanumeric with hypens or underscores
(.com) the top-level domain (.com specific, in this example)

You can check the pattern here too.

Solution 5:[5]

I think this should work if I understood your problem...

<!DOCTYPE html>
<html>
<head>
    <title>Url</title>
</head>
<body><form action="">
    <input type="url" pattern="https?://.+" required oninvalid="this.setCustomValidity('Please match the requested format')" >
    <input type="submit">
    </form>
</body>
</html>

The "pattern" attribute can have a regex expression for your input field.

Solution 6:[6]

I think you can use a regular expression there
just an example , 

<label for="url">Enter an https:// URL:</label>

<input type="url" name="url" id="url" placeholder="https://example.com" 
 pattern="^(http|https)://\.(.*)" size="30" required>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Naveen Jain
Solution 4
Solution 5
Solution 6

Related Questions