pattern in html5 input type url validation

html regex validation

10,847

Solution 1

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 2

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 3

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>

Solution 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

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.

View more solutions

10,847

flash

Updated on September 19, 2022

Comments

flash over 1 year
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>  
```
The pattern which I want is:
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.
- Naveen Jain over 4 years
  
  checkout this stackoverflow.com/a/58154804/8138584
flash over 4 years

Is it gonna meet all my requirements above ?
flash over 4 years

hi, I have one issue coming up. It is meeting the boundary conditions which I have mentioned above. 1. It should start from http or https. 2. It should have at-least one period after sub-domain. Thanks for that. When I enter / after the url facebook.com it is asking me to macth the requested format. I am wondering if you can remove this validation from the pattern. We want users to enter / after .com .org .net .gov .in
flash over 4 years

Example, when I enter php.net/manual/en/function.date.php it is asking me Please match the requested format.
flash over 4 years

Are you around ?
flash over 4 years

Example, when I enter php.net/manual/en/function.date.php it is asking me Please match the requested format. Basically after .com .net .gov user should have the ability to add / In my condition, user definitely enter: 1. http or https (It should start from http or https) 2. It should have atleast one period after sub-domain
Arslan Talib over 4 years

I have updated regex and it should match all your conditions now