HTML5 Form Validation With the “pattern” Attribute_part1

In this tutorial we’ll explore HTML’s pattern attribute, using it to help us customize the way we validate our forms.

Validation

Form validation is of vital importance to a website’s security as well as its usability. The validation process evaluates whether the input value is in the correct format before submitting it. For example, if we have an input field for an email address, the value must certainly contain a valid email address; it should start with a letter or a number, followed by the @ symbol, then end with a domain name.

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.

Invalid email address error message (Chrome)

Expecting every possible input scenario to be catered for is impractical, however. What if you have a username, zip code, or any special data types that are not specified as standard input types? How do we validate those inputs? This is where the attribute pattern comes into play.

Using the Pattern Attribute

The pattern attribute is only applicable on the input element. It allows us to define our own rule to validate the input value using Regular Expressions (RegEx). Again, if the value does not match the specified pattern, the input will throw an error.

For example, say we have a username input in our form. There isn’t a standard type for username, hence we use the regular text input type:

1. <form action="somefile.php">
2.     <input type="text" name="username" placeholder="Username">
3. </form>

Let’s define a rule to add using the pattern attribute. In this case, we’ll specify that the username should only consist of lowercase letters; no capital letters, numbers or other special characters allowed. In addition, the username length shouldn’t be more than 15 characters. In RegEx, this rule can be expressed as [a-z]{1,15}.

Add [a-z]{1,15} as the value of the pattern attribute in our username input:

1. <form action="somefile.php">
2.     <input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}">
3. </form>

Now, since it only accepts lowercase letters, submitting any other value will throw an error message:

The error message, stating the pattern is not matched

As you can see above, the error message says “Please match the requested format.” So our validation is working, but this message doesn’t help our users understand what the requested format actually is. UX fail.

Customizing the Validation Message

Fortunately, we can customize the message to be more helpful, and we have a couple of ways to do so. The easiest approach is to specify a title attribute within our input element:

1. <form action="somefile.php">
2.     <input
3.         type="text"
4.         name="username"
5.         placeholder="Username"
6.         pattern="[a-z]{1,15}"
7.         title="Username should only contain lowercase letters. e.g. john">
8. </form>

Now the title is included along with the default message:

Still, the popup message is inconsistent. If we compare it with the one thrown by the email input type shown earlier, the actual instructions could be more prominent.

The second approach will solve this for us.

Replacing the Default Validation Message

Let’s now replace the default “Please match the requested format” with a completely customized message. We’ll use a bit of JavaScript to do this.

Begin by adding an id to the input element, so as to be able to select it conveniently.

1. <form action="somefile.php">
2.     <input
3.         type="text"
4.         name="username"
5.         placeholder="Username"
6.         pattern="[a-z]{1,15}"
7.         id="username">
8. </form>

Now, we can select the input element using JavaScript and assign it to a variable (either between <script> tags on our page, in a separate JavaScript file, or in the JS pane on CodePen):

1. var input = document.getElementById('username');

Lastly, we specify the message used when the input shows its invalid state.

1. input.oninvalid = function(event) {
2.     event.target.setCustomValidity('Username should only contain lowercase letters. e.g. john');
3. }

The oninvalid event inherits an event object which contains a few properties, including the target property (the invalid element) and the validationMessage which contains the error text message. In the example above, we have overriden the text message using the setCustomValidity() method.

We should now find the custom message seamlessly replacing the default.

(continue)
If you found this post interesting, follow and support us.
Suggest for you:

Creating an MP3 Player with HTML5

Learn Web Development Using  HTML5 Advanced Programing

Ultimate HTML5,CSS3 & JAVASCRIPT To Create Your Own Interractive Websites

Easily Learn HTML 5 From Scratch

Ionic by Example: Create Mobile Apps in HTML5