Registration page validation using jQuery ensures that the information provided by the user is correct so the user can fill out the complete online form easily with little amount of time.
Although HTML5 has a validation form feature and there are many of JavaScript plugins out there, you must carefully choose the best one that will work on old browsers as well as for your cross-browser functionality considerations.
In today’s tutorial, I will show you how to set up a front-end validation that will work on old browsers. I will also be using the jQuery plugin name Validator jQuery Plugin by Yair Even-Or. There is a live demo download package that you can check out. So let’s get started.
Resources You Need to Complete This Tutorial
Open Sans (Google Font)
Flat icons
Google jQuery Hosted Library
Validator jQuery Plugin
Reset.css
HTML5 Shiv
Subpattern Background
Time and Patience
What We Are Going To Do
Download Source Files
View Demo
Setting Up
First, we need to set up our CSS and JavaScript libraries links on our head section.
The HTML
For our HTML file, we’re going to wrap everything in a container class, followed by class flat-design-form and then set up our menu tabs, which is an unordered list, with a class tabs.
Next, we’re going to create a div with an ID of login and a class of form-display and class show. These two classes will be used by the jQuery code later to hide and show our login and registration sections. Then, we we’re going to wrap items with a class item.
Notice that we use a semantic data-validate-length-range=”6″. This will be used by our validator jQuery plugin to limit the range of text entered on a specific field. To check on the list of semantics, you can use for this jQuery plugin, you can check here.
Now that we’re done with the login section, let’s move on the registration section. For the registration section, we’re going to wrap everything with a div that has an ID register and a class form-display and class hide. By default, this section will be hidden. And then, again, we will wrap each item with a class of item and use semantics for specific fields.
By this time, you can get similar look like the image below.
The CSS
For our CSS, let’s start adding the general styles. This will include the style for the body and class container.
Now, let’s style our menu tabs.
Next, let’s start styling our forms. This will include the text boxes with their specific type field.
For our buttons, we’re going to give it a border on the bottom with a hexa color #1B78B2 to create a nice flat button. Then, we will set its hover and active state.
Afterwards, let’s set up styles for our placeholders. We will use selector and vendor prefixes to target the type of each browser.
Finally, to make our validation form more lively, we will set up codes for our validation error with CSS3 animation. We will set each item to position relative, style its alert message and push it to the right side of each text boxes. Notice that we use CSS3 transition property to make a smooth effect when showing the error messages.
The jQuery
For our jQuery code for menu tabs, we’re going to put on the code below. This will hide and show the login and registration section using the class show and class hide.
Next, let’s add the following code to enable the functionalities of our validator jQuery plugin.
Conclusion
That’s it! You’re done! In this tutorial, we’ve created a flat webpage with a smooth animation and validation using CSS3 and validator jQuery plugin. This is not just the jQuery plugin you can use. There are a plenty of jQuery out there but, for me, I find this easy to use with a cool animation for alert messages.
Hope you enjoyed this tutorial and see you again next time!