web-dev-qa-db-ja.com

スタイリングフォームのエラーメッセージ-ブートストラップ/レール

私のRailsフォームはブートストラップでひどく見えます。より良い（見栄えの良い）エラーメッセージの解決策を知っている人はいますか？私はRailsとブートストラップを使用します。

私のフォーム（それはヘルパーです）は次のとおりです：

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

マイケルハートルが鉄道でどのようにそれを行うか見てみましょう。 screenshot

そしてそれは使用されたCSSです：

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

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

彼はすべてを説明します ここ 。

すべての行の先頭に小さな星も必要な場合は、フォームに含める必要があります。

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

少し遅れて気づきましたが、Rails 4およびBootstrap 3、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

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/Bootstrap 4 Beta List Group Variation

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

Application_helperにドロップして、フォームビューで呼び出しました

<%= errors_for(@user) %>

多分誰かがこれにつまずいて、それが役に立つと思うでしょう。

12
Rabbott

誰かがここでつまずいてBootstrap 4 alphaをRails 5およびbootstrap_form_for gemと一緒に使用している場合に備えて。私が使う：

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

本当に素敵に見えます。

enter image description here

4
Jay Killeen

私は実装しました ラボットのビューヘルパー Rails 5 and 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

そしてそれは次のようになります： enter image description here

3
Rajkaran Mishra

ブートストラップ4アルファ6

コンパイルしたBootstrap CSSを

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

.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");
}

入力グループ<div>でラップするため、入力グループアドオンを正しく表示することができませんでした。

bootstrap 4 with Rails errors

ドキュメント： https://v4-alpha.getbootstrap.com/components/forms/#validation

Railsにはエラーフィールドにクラスを設定する明確な方法がないため、これらのクラスの一部は使用されていません。

エラーリストには、この単純なクラスを使用しました

#error_explanation {
  color: red;
}
3
Chloe

多分もっと簡単なのは、フォーム自体で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が作成しています...

0
Dieglock