web-dev-qa-db-fra.com

Message d'erreur de formulaire de style - bootstrap/rails

Les messages d'erreur de mon formulaire Rails ressemblent à de la merde avec bootstrap. Est-ce que quelqu'un connaît une solution pour de meilleurs messages d'erreur? J'utilise Rails et Bootstrap.

Ma forme (c'est une aide) est comme ça:

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

The error message

ruby-on-rails-3formstwitter-bootstrap
18
Fawyd

Regardez comment Michael Hartl le fait dans les chemins de fer. screenshot

Et c'est le css utilisé:

#error_explanation {
  color: #f00;
  ul {
    list-style: none;
    margin: 0 0 18px 0;
  }
}

.field_with_errors {
  @extend .control-group;
  @extend .error;
 }

Il décrit tout ici .

Si vous voulez aussi la petite étoile au début de chaque ligne, vous devez l'inclure dans votre formulaire:

     <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>
      ...
22
crispychicken

Je me rends compte un peu tard, mais avec Rails 4 et Bootstrap 3 aujourd'hui, je me suis retrouvé dans une aide à la visualisation pour afficher les erreurs à l'aide d'un panneau:

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

 enter image description here

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

 enter image description here

Rails 4/Variation du groupe de listes bêta 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(: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

 enter image description here

Je l'ai déposé dans application_helper et je l'ai appelé dans mes vues de formulaire 

<%= errors_for(@user) %>

Peut-être que quelqu'un tombera sur cela et le trouvera utile.

12
Rabbott

Juste au cas où quelqu'un trébuche et utilise Bootstrap 4 alpha avec Rails 5 et bootstrap_form_for gem. J'utilise:

<div class="form-group">
  <%= f.alert_message "Please fix the errors below." %>
</div>

qui a l'air vraiment gentil.

 enter image description here

4
Jay Killeen

Bootstrap 4 Alpha 6

J'ai copié le CSS Bootstrap compilé à partir de

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css

Recherche de .has-danger, copie de toutes les classes, recherche et remplacement sur .has-danger pour .field_with_errors et ajout du .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");
}

Je n’ai pas pu obtenir l’affichage correct des addons des groupes d’entrée, car il encapsule l’entrée avec un <div>. 

 bootstrap 4 with Rails errors

Docs: https://v4-alpha.getbootstrap.com/components/forms/#validation

Honnêtement, certaines de ces classes ne sont pas utilisées car Rails ne dispose pas d'un moyen évident de définir des classes sur des champs d'erreur.

Pour la liste des erreurs, je viens d'utiliser cette classe simple

#error_explanation {
  color: red;
}
2
Chloe

J'ai implémenté l'assistant de vue de Rabbott dans Rails 5 et 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

Et cela ressemble à ceci:  enter image description here

1
Rajkaran Mishra

Une solution plus simple est peut-être la recherche d’id et de classes sur le formulaire lui-même. Fonctionne pour n'importe quel combo.

Par défaut, ce sont les lignes incluses dans l'échafaudage pour organiser les messages d'erreur. Vous pouvez en faire ce que vous voulez. Il suffit de les étendre dans votre fichier 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;
}

Si quelque chose ne fonctionne pas, vérifiez le navigateur en mode développeur. Vous devriez pouvoir y trouver tout le code html et css créé par Rails ...

0
Dieglock