The Innocent Statement

Forms can be much more fun than they currently are, and they can be much more functional. Combine this with the Please Wait Buttons for ultimate effect!

Functional Form validation in action.

Spicing up forms

Forms on the web can be so stale some times. I think that for this reason a lot of folks (especially in the blogging community) have started jazzing up their forms with some :focus magic in CSS. But, as most of these web developers probably know :focus doesn't work in Internet Explorer. A lot of people will say ‘stuff IE', but for the clients who still use IE, we at Netring decided that they need to benefit from it also.

Form Validation

Another thing that always seems woefully inadequate in the web standards world is the use of client side validation on forms. JavaScript validation can be very messy, and traditional methods do not separate the JavaScript from the main document. We decided that we wanted a simple validation script that could validate text fields and text areas on a form without needing to put any JavaScript on the page itself, but by relying on a generic JavaScript file to pick up on all the fields that have a class of ‘required'.

The solution

The solution is something that we have already started using on some of our sites (I haven't integrated in onto The Innocent Statement yet, because frankly the site needs a complete redesign, so I will do it then). It is all found in one JavaScript file that just needs to be included on the same page as the form that is being validated, and a little bit of extra CSS.

This file will add :focus effects to each input and text area in the form, using JavaScript's onfocus. And it will validate the same required controls, either popping up alerts to warn you of required fields, or by manipulating a div in the form to display errors. Not only will the javascript file generate the errors to be displayed on the page, but it will also highlight the offending control, and draw focus to it. Neat uh?

• Example 1 – With innerHTML Errors
• Example 2 – With alert errors

What do you need?

As mentioned before, all you have to do to that form is add a class of ‘required' to any text fields or text areas that need validating. It even goes as far as to see if the control identifier equals ‘email' and if so, asks for a valid email address. If you want to use the innterHTML errors, you will also have to add a DIV tag into the form with an ID of ‘errorReport'. The errors will then get written to this tag.

As far as CSS goes, if you have any input:focus or textarea:focus selectors you need to add an IE alternative for each (.onFocus is the class that will be used to simulate :focus in IE):

fieldset input:focus,
fieldset textarea:focus,
fieldset input.onFocus,
fieldset textarea.onFocus{
border-color:#0099FF;
border-width:medium;
}

And as well, you will need to add something like this for the validation:

fieldset input.highlight,
fieldset textarea.highlight{
border-color:#FF0000;
border-width:medium;
}

Limitations

At the moment, as far as spicing goes, it only adds :focus effects to inputs and text areas. In the future I would like to simulate :hover effects on fieldsets as well, but time stands still for no man.

With the validation the script only validated input text fields and text areas properly at the moment, however I am sure that if someone wanted to, they could easily add support for other control types.