pattern in html5 input type url validation
Question
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:
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 .
- It should start from http or https.
- 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.
6 answers
solution1
9 ACCPTED 2019-09-30 16:43:22
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]* )?
solution2
5 2019-09-29 11:25:06
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
solution3
2 2019-09-24 01:52:07
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.
solution4
2 2019-09-29 11:38:13
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
solution5
1 2019-09-23 23:00:51
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>
solution6
0 2019-10-01 07:04:21
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.