twitter-bootstrap 在 Bootstrap 中使用 CakePHP 时如何修改包装器 div 错误类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18112591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to modify wrapper div error class when using CakePHP with Bootstrap
提问by Yuri Ghensev
I'm using Bootstrap 3.0RC1with CakePHP 2.3.6. Trying to take advantage of those beautiful looking classes like has-errorand has-warningfor validation states, I need to change the default element class FormHelperadds to the wrapping div.
我正在Bootstrap 3.0RC1与CakePHP 2.3.6. 试图把那些看上去很美的类象的优势has-error，并has-warning为验证状态，我需要更改默认的元素类FormHelper增加了包装的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 errorclass in the wrapping div to has-error, so new styles are applied to the label, inputand span. Couldn't find a clean solution so far.
一切都很好，除了我需要error将包装 div 中的类更改为has-error，因此将新样式应用于label,input和span。到目前为止找不到干净的解决方案。
The ugly solution I thought is to copy has-errorstyles from Bootstrap to the errorclass in my app.
我认为丑陋的解决方案是将has-error样式从 Bootstrap复制到error我的应用程序中的类。
采纳答案by Tomo
If you introspect FormHelper, you'll find in this line"ugly" code that do error magic.
如果您内省FormHelper，您会在这一行中发现执行错误魔术的“丑陋”代码。
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.
由于原始作者没有通过配置留下任何机会来执行此操作，因此我建议您BootstrapFormHelper通过更改该单行来编写自己的和覆盖输入功能。
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.
由于我已经在使用 custom BootstrapFormHelper，这里是完整要点的链接。
Just copy file to app\View\Helper, and add to ALLyour Controllers this line:
只需将文件复制到app\View\Helper，并将这一行添加到您的所有控制器中：
public $helpers = array(
'Form' => array('className' => 'BootstrapForm')
);
assuming that you've saved gist as BootstrapFormHelper.php.
假设您已将要点保存为BootstrapFormHelper.php.
回答by Landon
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:
每次创建新输入时，请使用 CakePhp 函数 isFieldError() 检查该字段是否有任何错误，并像我在下面所做的那样简单地将“has-error”类附加到 div：
Just div setting:
只是 div 设置：
'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'))
)
); ?>
回答by Derek
A slightly less ugly solution is to add your selector for that specific type of error div to your bootstrap's CSS file. That way you're not copying all the style values, you're simply adding your error divs to the existing style definitions.
一个稍微不那么难看的解决方案是将特定类型的错误 div 的选择器添加到引导程序的 CSS 文件中。这样你就不会复制所有的样式值，你只是将错误 div 添加到现有的样式定义中。
Another option would be to use javascript to change those classes from 'error' to 'has-error' upon DOMREADY, though your page will look strange until that time. Not really a clean solution.
另一种选择是在 DOMREADY 上使用 javascript 将这些类从“错误”更改为“已错误”，尽管在那之前您的页面看起来很奇怪。不是一个真正干净的解决方案。
回答by Bryan Zwicker
I agree with Dereks first answer, adding your styles into the Bootstrap CSS file.
我同意 Dereks 的第一个答案，将您的样式添加到 Bootstrap CSS 文件中。
Lines 1590-1611
第 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;
}
You should change this to:
您应该将其更改为：
.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;
}
回答by rnsk
I used jQuery.
我使用了 jQuery。
<script>
$(document).ready(function() {
$('.form-control').parent('.error').each(function() {
$(this).addClass('has-error');
});
});
</script>
回答by web2kx
I have never used CakePHP, but I dare to post the answer here. I think the message element should be able to carry multiple classes like any other element does.
我从未使用过 CakePHP，但我敢在这里发布答案。我认为 message 元素应该能够像任何其他元素一样携带多个类。
So the simple edit is:
所以简单的编辑是：
'error' => array('attributes' => array('wrap' => 'span', 'class' => 'help-block has-error'))
I see no reason to copy and paste the css code.
我认为没有理由复制和粘贴 css 代码。
回答by SyntaxGoonoo
I use a custom Helper that is tailored to whatever the CSS framework is. In this case Bootstrap.
我使用了一个针对 CSS 框架量身定制的自定义 Helper。在这种情况下，Bootstrap。
<?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);
}
}
?>
Then use this instead of the standard Formhelper
然后使用它而不是标准Form助手
echo $this->UI->textBox('email'));
