ruby-on-rails-3 - not - twitter bootstrap rails
Mensaje de error de formulario de estilo-bootstrap/rails (6)
Los mensajes de error para mi formulario de rieles se parecen a la mierda con bootstrap. ¿Alguien sabe una solución para los mensajes de error mejorados? Yo uso Rails y Bootstrap.
Mi formulario (es un ayudante) es así:
<%= 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 %>
Bootstrap 4 Alpha 6
Copié el Bootstrap CSS compilado de
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css
.has-danger
, copié todas las clases, hice una búsqueda y reemplazo en .has-danger
para .field_with_errors
, y también .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");
}
No pude hacer que los complementos de los grupos de entrada se mostraran correctamente, ya que envuelve la entrada con un <div>
.
Docs: https://v4-alpha.getbootstrap.com/components/forms/#validation
Honestamente, algunas de estas clases no se usan porque Rails no tiene una forma obvia de establecer clases en los campos de error.
Para la lista de errores, acabo de usar esta clase simple
#error_explanation {
color: red;
}
Eche un vistazo a cómo Michael Hartl lo hace en railstutorial.
Y ese es el css utilizado:
#error_explanation {
color: #f00;
ul {
list-style: none;
margin: 0 0 18px 0;
}
}
.field_with_errors {
@extend .control-group;
@extend .error;
}
Él describe todo here .
Si también quieres la pequeña estrella al comienzo de cada línea, debes incluirla en tu formulario:
<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>
...
He implementado la herramienta de ayuda de Rabbott en Rails 5 y 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
Me di cuenta un poco tarde, pero me encontré con esto hoy con Rails 4 y Bootstrap 3, terminé haciendo un ayudante de visualización para mostrar errores usando un panel:
Rieles 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
Rieles 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 List Grupo Variación
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
Lo coloqué en application_helper y lo llamé en mis vistas de formulario
<%= errors_for(@user) %>
Tal vez alguien se tope con esto y lo encuentre útil.
Tal vez una más simple es la búsqueda de identificadores y clases en el propio formulario. Funciona para cualquier combo.
Por defecto, estas son las líneas incluidas en el andamio para organizar los mensajes de error. Puedes hacer con ellos lo que quieras. Solo tienes que extenderlos en tu archivo 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;
}
En caso de que algo no funcione, compruebe el navegador en modo desarrollador. Allí deberías poder encontrar todos los rieles html y css que está creando ...