How to modify wrapper div error class when using CakePHP with Bootstrap

Question

I'm using Bootstrap 3.0RC1 with CakePHP 2.3.6. Trying to take advantage of those beautiful looking classes like has-error and has-warning for validation states, I need to change the default element class FormHelper adds to the wrapping div.

So far I'm using this code:

echo $this->Form->create('User', array(
    'inputDefaults' => array(
        'class' => 'form-control',
        'div' => array('class' => 'form-group'),
        'label' => array('class' => 'control-label'),
        'error' => array('attributes' => array('wrap' => 'span', 'class' => 'help-block'))
    )
)); 

echo $this->Form->input('email'));

Which will output this on error:

<div class="form-group error">
    <label for="UserEmail" class="control-label">Email</label>
    <input name="data[User][email]" class="form-control form-error" type="email" value="[email protected]">
    <span class="help-block">Email already in use.</span>
</div>

Everything is just fine, except that I need to change the error class in the wrapping div to has-error, so new styles are applied to the label, input and span. Couldn't find a clean solution so far.

The ugly solution I thought is to copy has-error styles from Bootstrap to the error class in my app.

Answer 1

If you introspect FormHelper, you'll find in this line "ugly" code that do error magic.

Since original authors did not leave any chance to do this by configuration, I'm suggesting you writing own BootstrapFormHelper, and override input function, by changing that single line.

Here is snippet:

//inside public function input($fieldName, $options = array())

$out['error'] = null;
if ($type !== 'hidden' && $error !== false) {
    $errMsg = $this->error($fieldName, $error);
    if ($errMsg) {
        $divOptions = $this->addClass($divOptions, 'has-error'); //old string value was 'error'
        if ($errorMessage) {
            $out['error'] = $errMsg;
        }
    }
}

Since I'm already using custom BootstrapFormHelper, here is link to full gist.

Just copy file to app\View\Helper, and add to ALL your Controllers this line:

public $helpers = array(
  'Form' => array('className' => 'BootstrapForm')
);

assuming that you've saved gist as BootstrapFormHelper.php.

Answer 2

SOLUTION I USE:

Everytime you create a new input, check if there are any errors for that field using CakePhp function isFieldError() and simply append "has-error" class to div just like i did below:

Just div setting:

'div' => array('class' => "form-group ".($this->Form->isFieldError('username') ? 'has-error' : '')),

Full code for one field:

<?php echo $this->Form->input(
    'username',
    array(
        'label' => array('text' => 'Username', 'class' => 'strong'), 'placeholder' => "Your Username", 'class' => 'form-control', 
        'div' => array('class' => "form-group ".($this->Form->isFieldError('username') ? 'has-error' : '') ),
        'error' => array('attributes' => array('wrap' => 'p', 'class' => 'help-block has-error'))
        )
); ?>