twitter-bootstrap 样式表错误消息 - bootstrap/rails
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15155890/
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
Styling form error message - bootstrap/rails
提问by Fawyd
The error messages for my rails form look terrible with bootstrap. Does anyone know a solution for better (nice looking) error messages? I use Rails and Bootstrap.
我的 rails 表单的错误消息在 bootstrap 中看起来很糟糕。有谁知道更好（好看）错误消息的解决方案？我使用 Rails 和 Bootstrap。
My form (it's a helper) is like this:
我的表格（它是一个帮手）是这样的：
<%= form_for(@user) do |f| %>
<% if @user.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>
<ul>
<% @user.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="form-inline">
<%= f.text_field :email, class:'input-large', placeholder:'Test' %>
<!-- </div>
<div class="actions"> -->
<%= f.submit class:'btn btn-large btn-success' %>
</div>
<% end %>
回答by crispychicken
Take a look at how Michael Hartl does it in railstutorial.
看看 Michael Hartl 在 railstutorial 中是如何做到的。
And thats the used css:
这就是使用的css：
#error_explanation {
color: #f00;
ul {
list-style: none;
margin: 0 0 18px 0;
}
}
.field_with_errors {
@extend .control-group;
@extend .error;
}
He describes everything here.
他描述了这里的一切。
If you also want the little star at the beginning of every line you have to include it in your form:
如果您还想要在每一行开头的小星星，您必须将它包含在您的表单中：
<div id="error_explanation">
<h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>
<ul>
<% @user.errors.full_messages.each do |msg| %>
<li> * <%= msg %></li> <--- insert here
<% end %>
</ul>
</div>
...
回答by Rabbott
A little late I realize, but I just ran into this today with Rails 4 and Bootstrap 3, I ended up making a view helper to display errors using a panel:
我意识到有点晚了，但我今天刚刚在 Rails 4 和 Bootstrap 3 中遇到了这个问题，我最终制作了一个视图助手来使用面板显示错误：
Rails 4 / Bootstrap 3
导轨 4 / 引导程序 3
def errors_for(object)
if object.errors.any?
content_tag(:div, class: "panel panel-danger") do
concat(content_tag(:div, class: "panel-heading") do
concat(content_tag(:h4, class: "panel-title") do
concat "#{pluralize(object.errors.count, "error")} prohibited this #{object.class.name.downcase} from being saved:"
end)
end)
concat(content_tag(:div, class: "panel-body") do
concat(content_tag(:ul) do
object.errors.full_messages.each do |msg|
concat content_tag(:li, msg)
end
end)
end)
end
end
end
Rails 4 / Bootstrap 4 Beta
Rails 4 / Bootstrap 4 测试版
def errors_for(object)
if object.errors.any?
content_tag(:div, class: "card border-danger") do
concat(content_tag(:div, class: "card-header bg-danger text-white") do
concat "#{pluralize(object.errors.count, "error")} prohibited this #{object.class.name.downcase} from being saved:"
end)
concat(content_tag(:div, class: "card-body") do
concat(content_tag(:ul, class: 'mb-0') do
object.errors.full_messages.each do |msg|
concat content_tag(:li, msg)
end
end)
end)
end
end
end
Rails 4 / Bootstrap 4 Beta List Group Variation
Rails 4 / Bootstrap 4 Beta 列表组变体
def errors_for(object)
if object.errors.any?
content_tag(:div, class: "card border-danger") do
concat(content_tag(:div, class: "card-header bg-danger text-white") do
concat "#{pluralize(object.errors.count, "error")} prohibited this #{object.class.name.downcase} from being saved:"
end)
concat(content_tag(:ul, class: 'mb-0 list-group list-group-flush') do
object.errors.full_messages.each do |msg|
concat content_tag(:li, msg, class: 'list-group-item')
end
end)
end
end
end
I dropped it in application_helper and call it in my form views
我将它放在 application_helper 中并在我的表单视图中调用它
<%= errors_for(@user) %>
Maybe someone will stumble upon this and find it useful.
也许有人会偶然发现这一点并发现它很有用。
回答by Jay Killeen
Just in case someone stumbles here and is using Bootstrap 4 alphawith rails 5and bootstrap_form_for gem.
I use:
就在这里，以防有人绊倒并使用Bootstrap 4 alpha与rails 5和bootstrap_form_for gem。我用：
<div class="form-group">
<%= f.alert_message "Please fix the errors below." %>
</div>
which looks really nice.
这看起来真的很好。
回答by Rajkaran Mishra
I have implemented Rabbott's view helperin Rails 5 and Bootstrap 4:
我已经在 Rails 5 和 Bootstrap 4 中实现了Rabbott 的视图助手：
def errors_for(object)
if object.errors.any?
content_tag(:div, class: 'card text-white bg-danger mb-3') do
concat(content_tag(:div, class: 'card-header') do
concat(content_tag(:h4) do
concat "#{pluralize(object.errors.count, 'error')} prohibited this #{object.class.name.downcase} from being saved:"
end)
end)
concat(content_tag(:div, class: 'card-body') do
concat(content_tag(:ul) do
object.errors.full_messages.each do |msg|
concat content_tag(:li, msg)
end
end)
end)
end
end
end
And it looks like this:
它看起来像这样：
回答by Chloe
Bootstrap 4 Alpha 6
引导程序 4 Alpha 6
I copied the compiled Bootstrap CSS from
我从
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css
Searched for .has-danger, copied all the classes, did a search & replace on .has-dangerfor .field_with_errors, and I also added .field_with_errors label
搜索.has-danger，复制所有类，搜索并替换.has-danger为.field_with_errors，我还添加了.field_with_errors label
.field_with_errors label,
.field_with_errors .form-control-feedback,
.field_with_errors .form-control-label,
.field_with_errors .col-form-label,
.field_with_errors .form-check-label,
.field_with_errors .custom-control {
color: #d9534f;
}
.field_with_errors .form-control {
border-color: #d9534f;
}
.field_with_errors .input-group-addon {
color: #d9534f;
border-color: #d9534f;
background-color: #fdf7f7;
}
.field_with_errors .form-control-danger {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
}
I wasn't able to get the input groups addons to display correctly, as it wraps the input with a <div>.
我无法让输入组插件正确显示，因为它用<div>.
Docs: https://v4-alpha.getbootstrap.com/components/forms/#validation
文档：https: //v4-alpha.getbootstrap.com/components/forms/#validation
Honestly some of these classes are not used because Rails doesn't have an obvious way to set classes on error fields.
老实说，其中一些类没有使用，因为 Rails 没有明显的方法来设置错误字段的类。
For the error list, I just used this simple class
对于错误列表，我只是使用了这个简单的类
#error_explanation {
color: red;
}
回答by Dieglock
Maybe a simpler one is search for ids and classes on the form itself. Works for any combo.
也许更简单的方法是在表单本身上搜索 id 和类。适用于任何组合。
By default, this are the lines included in scaffold to arrange the error messages. You can do with them whatever you want. Just have to extend them in your css.scss file:
默认情况下，这是脚手架中包含的用于排列错误消息的行。你可以对他们做任何你想做的事。只需要在你的 css.scss 文件中扩展它们：
.field_with_errors {
padding: 2px;
background-color: red;
display: table;
}
#error_explanation {
width: 450px;
border: 2px solid red;
padding: 7px 7px 0;
margin-bottom: 20px;
background-color: #f0f0f0;
}
#error_explanation h2 {
text-align: left;
font-weight: bold;
padding: 5px 5px 5px 15px;
font-size: 12px;
margin: -7px -7px 0;
background-color: #c00;
color: #fff;
}
#error_explanation ul li {
font-size: 12px;
list-style: square;
}
In case something is not working, check the navigator in developer mode. There you should be able to find all the html and css rails is creating...
如果出现问题，请在开发人员模式下检查导航器。在那里你应该能够找到所有的 html 和 css rails 正在创建......
