10

我正在Bootstrap 3.0RC1使用CakePHP 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'));

这将在错误时输出： 

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

一切都很好，除了我需要将error包装 div 中的类更改为has-error，因此将新样式应用于label,input和span. 到目前为止找不到干净的解决方案。

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

4

7 回答 7

11

如果你反省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;
        }
    }
}

由于我已经在使用 custom BootstrapFormHelper，这里是完整 gist 的链接。

只需将文件复制到app\View\Helper，然后将这一行添加到所有控制器中：

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

假设您已将要点保存为BootstrapFormHelper.php.

于 2014-01-11T20:46:22.987 回答
10

我使用的解决方案：

每次创建新输入时，使用 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'))
        )
); ?>
于 2014-03-23T09:10:47.433 回答
1

我同意 Dereks 的第一个答案，将您的样式添加到 Bootstrap CSS 文件中。

1590-1611 行

    .has-error .help-block,
    .has-error .control-label {
      颜色：#b94a48；
    }

    .has-error .form-control {
      边框颜色：#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 {
      边框颜色：#953b39；
      -webkit-box-shadow: inset 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;
    }

    .has-error .input-group-addon {
      颜色：#b94a48；
      背景颜色：#f2dede；
      边框颜色：#b94a48；
    }

您应该将其更改为：

    .error .help-bloc, .has-error .help-block,
    .error .control-label，.has-error .control-label {
      颜色：#b94a48；
    }

    .error .form-control, .has-error .form-control {
      边框颜色：#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 {
      边框颜色：#953b39；
      -webkit-box-shadow: inset 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, .has-error .input-group-addon {
      颜色：#b94a48；
      背景颜色：#f2dede；
      边框颜色：#b94a48；
    }
于 2013-08-08T04:50:02.557 回答
1

一个稍微不那么难看的解决方案是将特定类型的错误 div 的选择器添加到引导程序的 CSS 文件中。这样您就不会复制所有样式值，而只是将错误 div 添加到现有样式定义中。

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

于 2013-08-07T20:23:25.010 回答
0

我从来没有用过CakePHP，但我敢在这里发布答案。我认为消息元素应该能够像任何其他元素一样携带多个类。

所以简单的编辑是：

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

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

于 2013-08-07T20:31:26.543 回答
0

我使用了一个自定义的 Helper，它是为任何 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);
    }

}

?>

然后使用它而不是标准Form助手

echo $this->UI->textBox('email'));
于 2014-05-26T03:29:00.073 回答
0

我使用了 jQuery。

<script>
$(document).ready(function() {
    $('.form-control').parent('.error').each(function() {
        $(this).addClass('has-error');
    });
});
</script>
于 2013-11-16T01:57:21.497 回答