HTML5 form validation

HTML5 and ccs3 are a really loud buzz in web design for quite some time. The new features can be really powerful tools in a developer’s arsenal. This technology can also be used in all sort of mobile devices. All modern devices have browsers that support all those new exciting features.

One thing that every web developer has worked on is a web form. Styling and client side validation of the web form used to be a tedious task, and always with the use of javascript. In this article we will see how we can use the new features browsers support to make a nice web form without using any javascript at all.

If you feel that you are reading known stuff in this article, scroll down to click the link with the demo page.

Step 1: HTML

Firstly, let’s make a simple web form with a few fields. We will ask for the First Name, Last Name, Email and a hobby from our visitor. In order to define which fields are required, we will add the required attribute to the <input> tag. Also, for all fields, we will add the placeholder attribute. The placeholder’s value will appear on the textbox when it is not focused. It can be used as a short explanation for what the user should type.

<div class="form_row">
    <label for="lname"> Last Name</label> 
    <div class="input">
        <input class="textbox" type="text" name="lname" placeholder="Enter your last name..." required="" />
    </div>
</div>

For the email field we will use an input tag with type=”email”. With this, the browser will handle the validation of the given email. In the placeholder we can type in an example email. It couldn’t be any more explanatory, right?

<div class="form_row">
    <label for="email"> Email</label>
    <div class="input">
        <input class="textbox" type="email" name="email" placeholder="email@domain.com" required="" />
    </div>
</div>

Step 2: CSS

We have created our form but the form itself is not nice at all. Apart from some basic styling, we will focus now on how we will use css to make some client side validation. The trick here is to take advantage of the new css3 pseudo classes

• focus An input tag that the user has clicked into.
• not(:focus) The opposite of the above state
• required All input that have the required attribute.
• valid All fields that have valid values (e.g. email). This pseudo class applies to all required input that have a value
• invalid All fields that have invalid values

What you need to know is that these pseudo classes are applied when the html page loads. Also, you can combine the pseudo classes and for example style differently a valid element when it is focused. Below there is a small sample of the css. You can check the demo page for the entire style sheet.

input.textbox:required {
    background: url("required_16.png") no-repeat scroll 185px 5px transparent;
}
input.textbox:required:valid {
    background: url("success_16.png") no-repeat scroll 185px 5px transparent;
}
input.textbox:required:invalid {
    background: url("error_16.png") no-repeat scroll 185px 5px transparent;
}

In order to make a validation for the form we will:

1. give a thicker border and a bigger box shadow to elements that are focused
2. give opacity less that 1 to unfocused elements
3. give a red color for invalid elements, green for valid and blue (neutral) for any other element
4. add a background image as an indicator for each field. A star for required, and a tick for valid

Step 3: Give motion to the form

Finally we can add some transitions to make our form a bit interactive. When an element is focused, we will add some transition effects on the box-shadow properties. Also, we will scale up a bit the focused element (also with a transition).

input.textbox {
    border: solid 1px #CCCCCC;
    margin: 4px;
    padding: 4px;
    width: 200px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
input.textbox:focus {
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 12px rgba(82, 168, 236, 0.6);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    transform: scale(1.05);
}

Click here to watch the demo!

Open in a new tab if you don’t want the lightbox. This simple demo works in Firefox, Chrome and Opera (no transitions here). If you are in IE9 (or lower) you will not see much.

I used some css from the bootstrap toolkit, from Twitter. You can read all about it here.