Hacking the CakePHP FormHelper Adding Required Indicators

May 14 2008

• Internet Explorer,
• Hacking,
• CSS,
• CakePHP,
• PHP,

Indicating to the user which fields are required is something that increases usuability, helping the user fill out the form more effectively and efficiently. These visual cues have absolutely nothing to do with the structure of the document, and would best be handled by CSS. Easy enough:

This works beautifully. One minor problem though all current versions of IE are not equipped to handle this and simply ignore your awsome CSS skills.

Time to hack

So with the majority of browsers ignorant to our CSS we have to resort to hacking the code that generates the form’s HTML. As always, whenever hacking a core helper place it in your app/views/helpers directory so you don’t clobber your hacks by upgrading CakePHP.

String definition

To keep things simple and neat define a constant for the required star string. This makes life easier and more maintainable if you ever have to change things.

Modifing the methods

Now all that is left is to go through each helper method that generates form widgets and add the following:

I normally add it to the following methods.

• generateInputDiv()
• generateAreaDiv()
• generateSelectDiv()
• generateCheckboxDiv()
• generateDateTime()
• generateDate()

Basically wherever you see an if ($required) add in $str .= FORMS_REQUIRED_STRING. Thats all there is to it really. However, dont’ use the CSS solution at the same time as the hack as you will get double stars.

div.required label {
  stupid-ie-be-more-funny: expression(this.doneReq ? '1' : (
    function(el) {el.innerHTML += '<span title="Required!" style="color:#900;"> *</span>'; return el.doneReq=true;})(this));
}

ul.barred li {
  border-left: expression((this.parentNode.firstChild==this) ? 'none' : '1px solid black';);
}