Css 如何在将CakePHP与引导一起使用时修改包装器div错误类

我使用的是

bootstrap3.0RC1

和

cakephp2.3.6

。试图利用那些漂亮的类，如

has error

和

has warning

for，我需要更改默认元素类

FormHelper

添加到包装div中

到目前为止，我正在使用以下代码：

这将在出现错误时输出：

电子邮件
电子邮件已在使用中。

一切都很好，只是我需要将包装div中的

error

类更改为

has error

，因此新样式应用于

标签

、

输入

和

span

。到目前为止找不到干净的解决方案

---

我认为丑陋的解决方案是将

has error

样式从引导复制到我的应用程序中的

error

类。

稍微不那么丑陋的解决方案是将特定类型错误div的选择器添加到引导的CSS文件中。这样，您就不用复制所有样式值，只需将错误div添加到现有样式定义中

---

另一种选择是使用javascript在DOMREADY上将这些类从“error”更改为“has error”，尽管在此之前您的页面看起来会很奇怪。这不是一个干净的解决方案。

我从未使用过CakePHP，但我敢在这里发布答案。我认为message元素应该能够像其他元素一样承载多个类

因此，简单的编辑是：

'error' => array('attributes' => array('wrap' => 'span', 'class' => 'help-block has-error'))

---

我认为没有理由复制和粘贴css代码。

我同意德里克斯的第一个答案，将您的样式添加到引导css文件中

第1590-1611行

.has-error .help-block, .has-error .control-label { color: #b94a48; } .has-error .form-control { border-color: #b94a48; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-error .form-control:focus { border-color: #953b39; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; } .has-error .input-group-addon { color: #b94a48; background-color: #f2dede; border-color: #b94a48; } .有错误。帮助阻止， .有错误。控件标签{ 颜色：#b94a48； } 。有错误。窗体控件{ 边框颜色：#b94a48； -webkit盒阴影：插入0 1px 1px rgba（0,0,0,0.075）； 盒影：插入0 1px 1px rgba（0,0,0,0.075）； } 。有错误。窗体控件：焦点{ 边框颜色：#953b39； -webkit盒阴影：插入0 1px 1px rgba（0,0,0,0.075），0 0 6px#d59392； 盒影：插入0 1px 1px rgba（0,0,0,0.075），0 0 6px#d59392； } .有错误。输入组加载项{ 颜色：#b94a48； 背景色：#f2dede； 边框颜色：#b94a48； } 您应该将此更改为：

.error .help-bloc, .has-error .help-block, .error .control-label, .has-error .control-label { color: #b94a48; } .error .form-control, .has-error .form-control { border-color: #b94a48; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .error .form-control:focus, .has-error .form-control:focus { border-color: #953b39; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; } .error .input-group-addon, .has-error .input-group-addon { color: #b94a48; background-color: #f2dede; border-color: #b94a48; } .error.help bloc.有错误。帮助块， .error.control label.有错误。control label{ 颜色：#b94a48； } .error.form控件.有错误。form控件{ 边框颜色：#b94a48； -webkit盒阴影：插入0 1px 1px rgba（0,0,0,0.075）； 盒影：插入0 1px 1px rgba（0,0,0,0.075）； } .错误。窗体控件：焦点，.有错误。窗体控件：焦点{ 边框颜色：#953b39； -webkit盒阴影：插入0 1px 1px rgba（0,0,0,0.075），0 0 6px#d59392； 盒影：插入0 1px 1px rgba（0,0,0,0.075），0 0 6px#d59392； } .error.input group addon.有错误。input group addon{ 颜色：#b94a48； 背景色：#f2dede； 边框颜色：#b94a48； } 我使用jQuery

<script>
$(document).ready(function() {
    $('.form-control').parent('.error').each(function() {
        $(this).addClass('has-error');
    });
});
</script>

$（文档）.ready（函数（）{
$（'.form control'）。父项（'.error'）。每个（函数（）{
$（this.addClass（'has-error'）；
});
});

如果你内省

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;
        }
    }
}

因为我已经在使用自定义的

BootstrapFormHelper

只需将文件复制到

app\View\Helper

，并将此行添加到ALL您的控制器：

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

---

假设您已将gist另存为

BootstrapFormHelper.php

我使用的解决方案：

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

<?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'))
        )
); ?>

每次创建新输入时，请使用CakePhp函数isFieldError（）检查该字段是否存在任何错误，并简单地将“has error”类附加到div，就像我在下面所做的那样：

仅div设置：

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

<?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'))
        )
); ?>

一个字段的完整代码：

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

<?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'))
        )
); ?>

---

我使用一个定制的助手，它可以根据CSS框架的任何内容进行定制。在本例中为引导

<?php

App::uses('AppHelper', 'View/Helper');

class UIHelper extends AppHelper
{
    public $helpers = array('Html', 'Form');

    public function textBox($fieldName, $options = array()) {
        $options += array('class' => 'form-control', 'div'=>false, 'error' => array('attributes' => array('wrap' => 'span', 'class' => 'help-block')));

        if (isset($options['label'])) {
            if (is_array($options['label'])) {
                $options['label'] += array('class' => 'control-label');
            } else {
                $options['label'] = array('text' => $options['label'], 'class' => 'control-label');
            }
        } else {
            $options['label'] = array('class' => 'control-label');
        }

        $divOptions = array('class' => "form-group has-feedback");
        if (isset($options['div'])) {
            if (is_array($options['div'])) {
                $divOptions += $options['div'];
            }
        }
        $options['div'] = false;                

        $divText = $this->Form->input($fieldName, $options);

        if ($this->Form->isFieldError($fieldName)) {
            $divOptions['class'] = "form-group has-error has-feedback";
            $divText .= $this->Html->tag('span', null, array('class' => "glyphicon glyphicon-remove form-control-feedback"));
        }

        return $this->Html->tag('div', $divText, $divOptions);
    }

}

?>

---

一个稍微不那么难看的解决方案是将特定类型错误div的选择器添加到引导的CSS文件中。这样，您就不必复制所有的样式值，只需将错误div添加到现有的样式定义中。另一种选择是使用javascript在DOMREADY上将这些类从“error”更改为“has error”，尽管在此之前您的页面看起来会很奇怪。不是一个干净的解决方案。是的，derek，谢谢，我真的想不出最好的解决方案。这确实解决了将

has error

类添加到

帮助块的问题。但将标签和输入样式都保留为不存在错误。这只会将
has error
类添加到包含消息的包装范围中；它不触及包含整个输入元素集的包装
div
。如果使用正确的CSS，您甚至不需要它。“'error'=>”是在表单类中包装错误消息元素的错误触发。从理论上讲，它应该可以工作，否则需要一些额外的代码来处理这个问题。正如我所说，我从未使用过CakePHP。稍后，我可能会尝试使用此框架自己运行一个快速测试。Thx.使用CakePHP很长时间了，我可以告诉你，它不起作用。这太难看了，我不喜欢它。但这也是我见过的唯一一种在Cake中添加适当类而不使用Javascript的明智方法，因此我向您致敬：）我想我可以使用这种方法，简单的方法。