HTML5 Pattern works on the principle of regular expression, set of code defining a pattern.This htm5 pattern attribute helps in form validation and 99% accurate data input from user. In this tutorial, we will create a regular expression to validate URL field.
What is Regular Expression?
Regular expression is a set of characters which defines pattern to validates an expression. It helps in searching a word/character/letter in a given expression and returns true or false. For instance, a regular expression can extract “feel” word or “very lucky” words from “I am feeling very lucky today”.
In this tutorial, we will validate various input fields to accept Youtube, Facebook, Twitter urls.
Validate Input Field with Regex
Here is a syntax for regular expression:
Validating Youtube URL
[code]
<input type="url" pattern="http://www\.youtube\.com\/(.+)|https://www\.youtube\.com\/(.+)" />[/code]
Validating Facebook URL
[code]
<input type="url" pattern="http://www\.facebook\.com\/(.+)|https://www\.facebook\.com\/(.+)" />
[/code]
Validating Twitter URL
[code]
<input type="url" pattern="http://\.twitter\.com\/(.+)|https://\.twitter\.com\/(.+)" />
[/code]
Above expression checks for a valid Youtube, Facebook & Twitter URL with protocols, either http or https.
Demo
Valid:
Invalid:
What’s Next?
If you are looking to validate a custom name, then simply replace the words Youtube with your custom name. Such kinda validations are helpful for precise data input such as registration forms or contact forms.
If you have any queries or need any assistance, then post them using the comment form below.
