HTML5: Regular Expression

The biggest advantage to field validation is the addition of pattern attribute to most of the form fields where validation applies. The pattern attribute specifies a regular expression that the element’s value is checked against. This attribute responsible for checking or matching the pattern, specified for the input field and considered to be invalid if user enters the wrong pattern. Upon invalid input, it will display an error message as a tooltip or in the statusbar.

So, let’s go through an example of showing how it works.

<!DOCTYPE html>
<html lang="en">
	<head>
	   <meta charset="utf-8">
	</head>
	<body>
		<form action="" method="post">
			<label for="username">Username: </label>
			<input type="text" name="username" id="username"
			   placeholder="Enter username"
			   pattern="[A-Za-z]{5,20}" autofocus required>
			<button type="submit">Go </button>
		</form>
	</body>
</html>

The above example validate the username for minimum 5 characters and maximum 20 characters and will accept only alpha-bates (both upper and lower case).

Check the below output on invalid input. It will pop-up the error message as “Please match the requested format.”

error_message

But, how can we customize the error message?? ❓ 😐

πŸ’‘ 😎 It’s too simple though :). We can use 2 ways to show the customized error message.

 

Way 1 (use title attribute) :
<input type="text" name="username" id="username"
    placeholder="Enter username"
    pattern="[A-Za-z]{5,20}" autofocus required
    title="Only Alphabets with minimum 5 and
           maximum 20 number of characters">

The above will output :
error_message

 

Way 2 (use constraint validation API) :
<input type="text" name="username" id="username"
    placeholder="Enter username"
    pattern="[A-Za-z]{5,20}" autofocus required
    oninvalid="setCustomValidity('Please enter only Alphabets
                                  with minimum 5 and
                                  maximum 20 number of characters')"
    onchange="try{setCustomValidity('')}catch(e){}">

The above will output :
error_message

Some more INPUT patterns:

Date input pattern (dd/mm/yyyy or mm/dd/yyyy):

<input type="text" pattern="\d{1,2}/\d{1,2}/\d{4}">

Password input pattern (The password’s first character must be a letter, it must contain at least 4 characters and no more than 15 characters and no characters other than letters, numbers and the underscore may be used):

<input type="password" pattern="^[a-zA-Z]\w{3,14}$">

URL input pattern (http://www.google.co.in or https://www.google.co.in):

<input type="url" pattern="https?://.+">

IP address pattern (192.168.10.1):

<input type="text" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}">

Price input pattern (0.50 or 35 or 56.50):

<input type="text" pattern="\d+(\.\d{2})?">

Note: The pattern attribute works with the following input types: text, search, url, tel, email, and password and is supported in IE 10, IE 11, Firefox, Opera, and Chrome.

Thanks πŸ™‚ and will be happy to listen from you πŸ™‚ πŸ™‚

Advertisements

2 Comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s