WordPress Tweaks & Tuts?

Subscribe to TheCreatology via RSS | Email

Use HTML5 Pattern to Input Specific URL using Regular Expression

by Aky Joe

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.

learn html5 to create websi Use HTML5 Pattern to Input Specific URL using Regular Expression

Html5 Pattern Attribute

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

<input type="url" pattern="http://www\.youtube\.com\/(.+)|https://www\.youtube\.com\/(.+)" />

Validating Facebook URL

<input type="url" pattern="http://www\.facebook\.com\/(.+)|https://www\.facebook\.com\/(.+)" />

Validating Twitter URL

<input type="url" pattern="http://\.twitter\.com\/(.+)|https://\.twitter\.com\/(.+)" />

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.

Similar Topics: , ,

TheCreatology Support

Got a Query? We're ready, Just Say it!

If you have a doubt or a feedback, then get-in-touch with TheCreatology Support Team now.

Start a Hangout or Email Us

Are you looking for...

  • Logo Design
  • Web Development
  • Thesis Skin Design
  • Graphic Designing
  • Virtual Assistance
Hire Us!

1 Comment

{ read them below or add one }

Asiru Nasir January 4, 2013 at 6:59 pm

Belated Marry Christmas and Happy New Year… I’ll come back to you soon for some theme query….

Thanks

Reply

Leave a Comment

Previous post:

Next post:

Contact Aky




Yes, I agree that all information above is valid.