Devoth Design - Web design Edinburgh.

Short guide to more accessible form error messages in CodeIgniter

The problem

Just recently when testing for errors in a CI form (I'm a bit new to CodeIgniter), it came to me that errors served by validation_errors() in form helper are not exactly what I would call 'accessible'.

Sure they are neat in the way that there's an error message presented for every error (so failing to populate both user name and password when they are required, will display two error messages by default), but this should be taken a step further. I'm talking about error labels, e.g.:

<label for="password">The Password field must be at least 6 characters in length</label>

So users can click on error and get straight to field that needs fixing.

The idea

My first idea was to write a wrapper for form helper or somehow extend the form class. While this seemed as a good solution, a deeper study of validation class usage revealed a quicker fix. By default, rule for password could look like this:

$this->form_validation->set_rules('password', 'Password', 'trim|required|min_length[6]|md5');

Where set_rules() method parameters are as follows:

1. Password field name attribute (the same which you've defined)
2. Quoting the manual - A "human" name for this field, which will be inserted into the error message.
3. Validation rules for password field (in the above example password is required and at least 6 characters long) plus some modifiers (trimming spaces and instant conversion to md5).

Already know the solution?

The solution

A simple solution is to insert a label into second parameter, which will be literally used for displaying the error. It could look like this:

$this->form_validation->set_rules('password', '<label for="password">Password</label>', 'trim|required|min_length[6]|md5');

But why not take it a step further and use form_label() from form helper? That would result in:

$this->form_validation->set_rules('password', form_label('Password', 'password'), 'trim|required|min_length[6]|md5');

Important notes

As you've probably noticed, my fix will result in a slightly different code that we were aiming at:

The <label for="password">Password</label> field must be at least 6 characters in length

Only the actual field name is wrapped in label tag. But hey - with some simple styles (below) it's not that bad at all. For more organised styles it would be nice to add a custom class to that label, or better yet - wrap the whole error message in some unique container (so you'll be able to specify styles only for that error label) using set_error_delimiters():

$this->form_validation->set_error_delimiters('<div class="form_error">','</div>');

That will result in following html:

<div class="form_error">The <label for="password">Password</label> field must be at least 6 characters in length</div>

Add some styles to that:

.form_error label {color:#F00;text-decoration:underline}

That's better! Hope you've enjoyed this quick fix as much as I did. Here's the final code:

// in stylesheet
.form_error label {color:#F00;text-decoration:underline}

// in form controller
$this->form_validation->set_error_delimiters('<div class="form_error">','</div>');
$this->form_validation->set_rules('password', form_label('Password', 'password'), 'trim|required|min_length[6]|md5');

Where to from here?

If you're looking for some basic info about validating forms in Codeigniter check out Form validation tutorial in CodeIgniter's User Guide.

If you have any suggestions or perhaps spotted an error in the above tutorial - drop me a line.

Author: Devoth. 13 January 2010
last update: 13 January 2010

Follow on: