pattern in html5 input type url validation

url validation regex javascript
html input pattern
html5 form validation no spaces
html form validation
input type=url without http
url validation in javascript
javascript pattern validation
html5 email validation pattern

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.

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]* )?

Validating URLs, Can probably use url validation segments after the http:// <input type="url" name=​"url" id="url" placeholder="https://example.com"  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

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

pattern in html5 input type url validation, An HTML form with an input field that can contain only three letters (no The pattern attribute works with the following input types: text, date, search, url, tel,  The <input> element's value attribute contains a DOMString which is automatically validated as conforming to URL syntax. More specifically, there are two possible value formats that will pass validation: An empty string ("") indicating that the user did not enter a value or that the value was removed.

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.

HTML input pattern Attribute, Definition and Usage. The <input type="url"> defines a field for entering a URL. The input value is automatically validated before the form can be submitted. The pattern attribute is an attribute of the text, tel, email, url, password, and search input types. The pattern attribute, when specified, is a regular expression which the input's value must match in order for the value to pass constraint validation.

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>

HTML input type="url", INPUT patterns for different data types. URL input pattern: input type="url" pattern​="https?://.+". IPv4  The HTML5 specification has made validation that bit easier with the introduction of new input types such as email, url, and tel, and these also come packaged up with predefined validation. Whenever the value given is not met with the expected formatting, these input types will throw an error message thus preventing submission.

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

HTML5 Form Validation Examples < HTML, The DOM Input URL pattern Property in HTML DOM is used to set or return the pattern attribute of a URL field. It is used to specify Example-1: This example illustrates how to return the Input url pattern property. input type = "url". id = "gfg​". You can also use the pattern attribute along with other types of input elements like email and url to restrict what is considered valid. For example, let's say you only want users to enter a URL which is a subdomain of tutsplus.com. You can simply set the value of the pattern attribute to https://.*\.tutsplus.com.

HTML, The HTML5 specification has made validation that bit easier with the introduction of new input types such as email , url , and tel , and these also  Data Validation with Regular Expressions The pattern attribute of the <input> element allows you to add basic data validation without resorting to JavaScript. It works by matching the input value against a regular expression. A regular expression is a formalized string of characters that define a pattern.

HTML5 Form Validation With the “pattern” Attribute, Advanced Validation With Regex Patterns. You can also use the pattern attribute along with other types of input elements like email and url to  Lets look at email input type of HTML5 forms. In this video, we illustrate how you can implement simple email validation using email input type. HTML file index.html Email input type: HTML5 Email: …

Form Input Validation Using Only HTML5 and Regex, Browsers could perform some kind of validation on URL inputs. In such cases, the pattern attribute may be used to perform a second check after the Here, we'​ll make use of the placeholder attribute, which has been introduced in HTML 5. label { display: block; font: 1rem 'Fira Sans', sans-serif; } input, label { margin: .4rem 0; }

Comments
  • What language are you using to process your form? PHP? CGI/Perl?
  • 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.
  • checkout this stackoverflow.com/a/58154804/8138584
  • 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.
  • Are you around ?
  • 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
  • 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.
  • Are you around ?
  • 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
  • Is it gonna meet all my requirements above ?