12

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.

Improve this question
3
  • What language are you using to process your form? PHP? CGI/Perl? Commented Sep 28, 2019 at 3:47
  • I am using php. I think we need to make some minor changes here pattern="https://.*" but I am not sure what it should be. Commented Sep 28, 2019 at 13:27
  • 1
    checkout this stackoverflow.com/a/58154804/8138584 Commented Oct 1, 2019 at 15:32

7 Answers 7

Reset to default
20
+50

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]* )?
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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
Example, when I enter php.net/manual/en/function.date.php it is asking me Please match the requested format.
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
@flash - Add (?::\d{2,5})?(?:\/[^\s]*)? at the end
7

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

Improve this answer

4 Comments

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
Example, when I enter php.net/manual/en/function.date.php it is asking me Please match the requested format.
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
I have updated regex and it should match all your conditions now
5 
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

Improve this answer

Comments

2

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.

Improve this answer

4 Comments

I feel like this answer is very underrated.
What if I'm not looking for https, I just need <something>.<something>
@Qasim You can use any pattern you want to use there.
@Qasim, this should work for you: [^.]+\.[^.]+
1

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.

Improve this answer

Comments

0

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>
Improve this answer

1 Comment

Is it gonna meet all my requirements above ?
0

escaped:

/^(https?:\/\/)?(w{3}\.)?[\w\d]*\.([a-zA-Z]*\.)?([a-zA-Z]*)?$/

pure regex:

^(https?:\/\/)?(wwww{1}\.)?[\w\d]*\.([a-zA-Z]*\.)?([a-zA-Z]*)?$

works well for me. tested in https://regex101.com/ for these cases:

http://test.com
https://www.test.com
http://www.test.com
https://test.com
www.test.com
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.