HTML5 input type URL validation with protocol and domain extension

by

We have a cool feature in HTML5 validating website url with declarating input type=”url”. This feature is supported in almost every browser.

Below html5 input tag like below will validate url for both protocols http and https with validating domain extension i-e .com, .co etc.

<input 
	type="url"
	name="website"
	placeholder="Website URL: http(s)://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
/>

The following url patterns it will validate:

https://example.com
http://example.com
https://www.example.com
http://www.example.com
  1. It should start from http or https.
  2. It should have at-least one period after sub-domain