使用CakePHP和Bootstrap时如何修改包装器div错误类

Yur*_*sev 10 css cakephp twitter-bootstrap

我使用的是Bootstrap 3.0RC1CakePHP 2.3.6.试图把那些看上去很美的类象的优势has-error,并has-warning验证状态,我需要更改默认的元素类FormHelper增加了包装的div.

到目前为止我正在使用此代码:

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'));
Run Code Online (Sandbox Code Playgroud)

哪个会在出错时输出:

<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="a@a.com">
    <span class="help-block">Email already in use.</span>
</div>
Run Code Online (Sandbox Code Playgroud)

一切都很好,除了我需要更改error包装div中的类has-error,所以新的样式应用于label,inputspan.到目前为止找不到干净的解决方案.

我认为这个丑陋的解决方案是将has-error样式从Bootstrap 复制到error我的应用程序中的类.

Tom*_*omo 10

如果你内省FormHelper,你会发现这行 "丑陋"的代码可以做出错误魔法.

由于原始作者没有任何机会通过配置做到这一点,我建议您BootstrapFormHelper通过更改该单行来编写自己的,并覆盖输入功能.

这是片段:

//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;
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

由于我已经使用自定义BootstrapFormHelper,这里是完整要点的链接.

只需将文件复制到app\View\Helper,并将此行添加到所有控制器:

public $helpers = array(
  'Form' => array('className' => 'BootstrapForm')
);
Run Code Online (Sandbox Code Playgroud)

假设你已经将gist保存为BootstrapFormHelper.php.


小智 10

我使用的解决方案:

每次创建一个新输入时,使用CakePhp函数isFieldError()检查该字段是否有任何错误,只需将"has-error"类附加到div,就像我在下面所做的那样:

只是div设置:

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

一个字段的完整代码:

<?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'))
        )
); ?>
Run Code Online (Sandbox Code Playgroud)