Ruby on rails 3 样式化表单错误消息-引导/rails
我的rails表单的错误消息在引导时看起来很糟糕。有人知道更好(好看)错误消息的解决方案吗?我使用Rails和引导 我的表单(它是一个助手)如下所示:Ruby on rails 3 样式化表单错误消息-引导/rails,ruby-on-rails-3,forms,twitter-bootstrap,Ruby On Rails 3,Forms,Twitter Bootstrap,我的rails表单的错误消息在引导时看起来很糟糕。有人知道更好(好看)错误消息的解决方案吗?我使用Rails和引导 我的表单(它是一个助手)如下所示: <%= form_for(@user) do |f| %> <% if @user.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(@user.errors.count, "error") %&
<%= 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 %>
禁止保存此用户:
看看迈克尔·哈特尔在《铁路史》中是如何做到这一点的 这就是所使用的css:
错误解释{
颜色:#f00;
保险商实验室{
列表样式:无;
利润率:0.18px0;
}
}
.field_带有_错误{
@对照组;
@扩大误差;
}
他描述了一切
如果您还希望在每行的开头加上小星星,则必须将其包含在表格中:
<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>
...
禁止保存此用户:
- *
我意识到有点晚了,但今天我在Rails 4和Bootstrap 3中遇到了这个问题,我最终制作了一个视图助手,使用面板显示错误:
Rails 4/Bootstrap 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版
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列表组变体
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
我把它放到application\u helper中,并在表单视图中调用它
<%= errors_for(@user) %>
也许有人会偶然发现这一点并发现它很有用。以防有人在这里偶然发现,并将bootstrap4alpha
与rails5
和Bootstrap\u form\u用于gem
。
我使用:
看起来真不错
我在Rails 5和Bootstrap 4中实现了:
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
看起来是这样的:
Bootstrap 4 Alpha 6
我从中复制了编译的引导CSS
搜索。has danger
,复制所有类,在上进行搜索和替换。has danger
搜索。field\u有错误
,我还添加了。field\u有错误标签
.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");
}
我无法正确显示输入组插件,因为它用
包装输入
文件:
老实说,这些类中的一些并没有被使用,因为Rails并没有在错误字段上设置类的明显方法
对于错误列表,我只使用了这个简单的类
#error_explanation {
color: red;
}
也许更简单的方法是在表单本身上搜索ID和类。适用于任何组合
默认情况下,这是scaffold中包含的用于排列错误消息的行。你可以用它们做任何你想做的事。只需在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;
}
如果某些东西不起作用,请在开发人员模式下检查导航器。在那里,您应该可以找到所有html和css rails正在创建…另一个仅使用SCS的变体
#error_explanation{
background: #f23551;
color: #fff;
border-radius: 4px;
margin-bottom: 20px;
h2{
padding: 20px;
margin: 0;
font-size: 20px;
}
ul{
background: #fff;
color: #e5324a;
border: 1px solid #F23551;
margin: 0;
list-style: none;
padding: 14px 0;
li{
padding: 4px 20px;
&:before {
content: '×';
font-weight: bold;
font-size: 20px;
margin-right: 10px;
}
}
}
}
我创建了一个自定义初始值设定项,使每个字段下面都有自己的错误
# app/config/initializers/bootstrap_form_errors_customizer.rb
ActionView::Base.field_error_proc = proc do |html_tag, instance|
is_label_tag = html_tag =~ /^<label/
class_attr_index = html_tag.index 'class="'
def format_error_message_to_html_list(error_msg)
html_list_errors = "<ul></ul>"
if error_msg.is_a?(Array)
error_msg.each do |msg|
html_list_errors.insert(-6,"<li>#{msg}</li>")
end
else
html_list_errors.insert(-6,"<li>#{msg}</li>")
end
html_list_errors
end
invalid_div =
"<div class='invalid-feedback'>#{format_error_message_to_html_list(instance.error_message)}</div>"
if class_attr_index && !is_label_tag
html_tag.insert(class_attr_index + 7, 'is-invalid ')
html_tag + invalid_div.html_safe
elsif !class_attr_index && !is_label_tag
html_tag.insert(html_tag.index('>'), ' class="is-invalid"')
html_tag + invalid_div.html_safe
else
html_tag.html_safe
end
end
#app/config/initializers/bootstrap#u form#u errors#u customizer.rb
ActionView::Base.field_error_proc=proc do | html_标记,实例|
_label\u tag=html\u tag=~/^在一开始构建一个表单并在之后重构代码,这样您就有了一个干净的第一次设置。肯特基提到观看迈克尔·哈特尔的过程是一个很好的输入。谢谢,@KentTucky。这需要包含引导源SASS代码。这使得JS和CSS编译的资产更大。将此用作时无法使用CDN版本。错误
和控制组
不可用。在Bootstrap 4中,我们应该扩展输入上的。类无效。我用.field\u和\u errors input{@extend.is\u invalid}处理了这个问题。
也许你可以添加一个屏幕截图,显示你的消息是什么样子的?
# app/config/initializers/bootstrap_form_errors_customizer.rb
ActionView::Base.field_error_proc = proc do |html_tag, instance|
is_label_tag = html_tag =~ /^<label/
class_attr_index = html_tag.index 'class="'
def format_error_message_to_html_list(error_msg)
html_list_errors = "<ul></ul>"
if error_msg.is_a?(Array)
error_msg.each do |msg|
html_list_errors.insert(-6,"<li>#{msg}</li>")
end
else
html_list_errors.insert(-6,"<li>#{msg}</li>")
end
html_list_errors
end
invalid_div =
"<div class='invalid-feedback'>#{format_error_message_to_html_list(instance.error_message)}</div>"
if class_attr_index && !is_label_tag
html_tag.insert(class_attr_index + 7, 'is-invalid ')
html_tag + invalid_div.html_safe
elsif !class_attr_index && !is_label_tag
html_tag.insert(html_tag.index('>'), ' class="is-invalid"')
html_tag + invalid_div.html_safe
else
html_tag.html_safe
end
end