I don’t like the default symfony ‘down arrow’ to associated with a form error. So I want to make it look a bit more sexy. Here is what you need to do:

1. Edit your application settings.yml file to overwrite the default ‘down’ arrow. The following settings indicate no prefix or suffix, but a CSS class ‘formerror’ which we will define later:

all:
  .settings:
    #Form validator style settings
    validation_error_class:     formerror
    validation_error_prefix:    ''
    validation_error_suffix:    ''
    validation_error_id_prefix: error_for_

2. Find a nice icon to use to display next to a field with an error. For example, I like this one:

3. Update your CSS file to include a formerror class:

.formerror{
   padding: 3px 20px 0px;
   background: url(../images/icon_sml_alert.png) no-repeat left bottom;
   color: red;
}

4. Now when you use the Symfony form helper to validate a field, it will automatically set the CSS class to ‘formerror’. For example;

echo form_error('request_type');

Will print (if the error is triggered)

<div style="" class="formerror" id="error_for_request_type">Please specify the request type </div>

So you get something looking a bit nicer than that ‘down’ arrorw:

Looks hot! - I know you like it, now wipe off that drool on your keyboard and get back to work….