22

Railsにdiv.field_with_errorsラベルと実際のフィールドの両方の周りに作成するのではなく、両方の周りに作成するように指示する方法はありdiv.errorますか？

たとえば、フォームを使用したビューのスニペット（HAMLで記述）

= form_for @user do |f|
  %div.clearfix
    = f.label :name
    %div.input
      = f.text_field :name

エラーが発生した場合は、ルートdivをdiv.clearfix.error避け、それを避けたいと思いfield_with_errorsます。できますか？

別のオプションとして、formtasticでBootstrapスタイルの要素を作成できますか。formtasticのcssクラスとhtmlクラスは使用しませんが、bootstrapの要素を使用します。formtasticを使用する場合、エラーフィールドを使用して何かを作成できますか？

4

14 に答える 14

17

@flowdelic の答えは、最も簡単な修正方法のようです。ただし、名前が正しくありません。これは Rails/Bootstrap のバージョンが原因かもしれませんが、これでうまくいきました。

/* Rails scaffold style compatibility */
#error_explanation {
  @extend .alert;
  @extend .alert-error;
  @extend .alert-block; /* optional */
}

.field_with_errors {
  @extend .control-group.error
}
于 2012-05-18T11:14:42.927 に答える
9

作成config/initializers/field_with_errors.rbする:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  "<div class=\"error\">#{html_tag}</div>".html_safe
end

これは と交換.field-with-errorsされ.errorます。

ただし、「Rails-way」で見つけた最大の問題はdiv、要素自体にクラスを追加するだけでなく、要素を new でラップすることです。私はこれを好みます：

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  parts = html_tag.split('>', 2)
  parts[0] += ' class="field_with_errors">'
  (parts[0] + parts[1]).html_safe
end
于 2016-10-17T19:09:15.033 に答える
7

誰かがLESSを使用している場合:

bootstrap_and_overrides.css.less に次を追加できます。

#error_explanation {
  .alert();
  .alert-error();
  .alert-block();
}

.field_with_errors {
  .control-group.error();
}

これは、示された sass の例の LESS バージョンです。

于 2012-11-20T10:30:59.393 に答える
5

これは、https://github.com/anjlab/bootstrap-rails gem を使用する場合、Bootstrap 3 で機能するものです。

.field_with_errors {
  @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
}
于 2013-09-12T09:48:01.780 に答える
4

ブートストラップ 3.0.3 とレール 4.0.2 で行ったことは次のとおりです。

/* Rails scaffold style compatibility */
#error_explanation {
  @extend .alert;
  @extend .alert-danger;
  width: inherit;
}

.field_with_errors {
  @extend .has-error;
  display: inherit;
  padding: inherit;
  background-color: inherit;
}
于 2014-01-07T20:55:40.483 に答える
3

Twitter Bootstrap で SASS を使用している場合は、@extend ディレクティブを使用して Twitter Bootstrap スタイルを Rails で生成された CSS クラスに適用できます。(GitHub を検索してください。利用可能な Bootstrap/SASS ポートがいくつかあります。)

例えば：

@import "bootstrap";

/* Rails scaffold style compatibility */
.errorExplanation {
  @extend .alert-message;
  @extend .block-message;
  @extend .error;
}

.fieldWithErrors {
  // pulled from div.clearfix.error
  @include formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
}

「エラー」の Twitter Bootstrap スタイルが div.clearfix セレクターにアタッチされていることに注意してください。これにより、単純にこれを行うことができなくなります。

.fieldWithErrors {
  @extend .error;
}

そのため、代わりに、Bootstrap の div.clearfix.error の定義から .fieldWithErrors セレクターにコードをコピーして貼り付けました。

于 2012-01-05T15:02:26.153 に答える
1

ブートストラップ 3.0 では、クラスはhas-error. @odedの解決策は次のとおりです。

$('.field_with_errors').parent().addClass('has-error');
于 2013-10-12T18:35:54.990 に答える
1

コメントするのに十分なポイントがないので、ここで答えます：

@iosctr による回答に追加するには、bootstrap_and_overrides.css.scssファイルに追加した後にのみ css が機能し始めました。

@import "bootstrap";
body { padding-top: 40px; }
@import "bootstrap-responsive";

#error_explanation {
  @extend .alert;
  @extend .alert-error;
  @extend .alert-block; 
}

.field_with_errors {
  @extend .control-group.error;
}
于 2013-06-26T23:45:38.243 に答える
1

以下は私が思いついたものです。

これをcssに追加しました

.field_with_errors {
    display:inline;
    margin:0px;
    padding:0px;
}

これをに追加しました<head>

$(function(){
    $('.field_with_errors').addClass('control-group error');
});
于 2012-11-13T19:48:22.967 に答える
0

Formtastic Bootstrap gem を使用して、 Formtastic で Twitter Bootstrap に適したマークアップを作成できます。

于 2011-12-12T15:36:41.237 に答える
0

Bootstrap 3 と Rails 4 -- 次のことをしなければなりませんでした:

.alert-error{
    color: #f00;
    @extend .alert;
    @extend .alert-danger;
}

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

.field_with_errors
{
    input {
    border: 2px solid red;
    }
}
于 2014-08-30T00:56:02.707 に答える
0

このすべての混乱に対する非常に簡単な解決策があります。これはJavaScriptベースですが、私の問題を解決しました-これを追加するだけです（水平フォームを使用する場合）：

$(document).ready(function() {
    $('.field_with_errors').parent().addClass('error');
});

これは基本的に Rails のデフォルトの動作を取り、Bootstrap の動作に変換します。control-groupエラークラスをそれが属する場所に追加します。いいえcss、デフォルトをオーバーライドしませんfield_error_proc。

于 2013-06-24T17:26:20.013 に答える
0

実際には、あなたが思っているよりも刺激的です。

私はActionView::Base.field_error_proc. （これは文字列で渡されるため、それ自体が物語であり、実際には確実にいじることができるものではありません:(

しかし、それから始めて、それで十分かどうかを確認してください。

于 2011-09-17T14:01:54.653 に答える
0

はい、ラッパー div をハックできます。このヒントから借りて、ラッパーをラベルのクラスに変換し、invalid入力自体をフォームに変更しました...

これを設定のどこかに配置します（例environments.rb）

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  (html_tag.gsub /class="(.*?)"/, 'class="\1 invalid"').html_safe
end
于 2020-08-03T12:52:27.027 に答える