2016-05-26 26 views
2

フォームが送信され、エラーが発生した場合:ブートストラップ・エラー/アラート・スタイリングで問題のあるフィールドを強調表示したい。すぐに使用可能:ブートストラップは、従来のfields_with_errorsクラスのスタイルを変更し、railsフォームの失敗検証フィールドに適用します。過去per this question.fields_with_errorsのブートストラップ・スタイリングが機能しない

私は単純に、この追加しました:

.field_with_errors { 
    @extend .has-error; 
} 

を、必要に応じて、問題のあるフォームフィールドは、ブートストラップエラー/警告スタイリングで強調されました。しかし、これは私の現在のレールプロジェクトでは機能しません。私は何が欠けているのか分かりません。提出する前に、関連するフォームフィールドの

#application.css.scss 

@import "bootstrap-sprockets"; 
@import "bootstrap"; 
@import "bootstrap-datepicker3"; 


.field_with_errors { 
    @extend .has-error; 
} 


#relevant gems in Gemfile 

gem 'sass-rails', '~> 5.0' 
gem 'bootstrap-sass', '~> 3.3', '>=3.3.6' 
gem 'bootstrap-datepicker-rails', '~> 1.6', '>= 1.6.1.1' 


HTML(両方のフィールドが検証に失敗):

<div class="form-group"> 
    <label for="expense_duration_start_date">Start Date</label><br> 
    <input data-provide="datepicker" type="text" name="expense_duration[start_date]" id="expense_duration_start_date" /> 
</div> 

<div class="form-group"> 
    <label for="expense_duration_end_date">End Date</label><br> 
    <input data-provide="datepicker" type="text" name="expense_duration[end_date]" id="expense_duration_end_date" /> 
</div> 

は、私は、単純な何かが欠けています確信しています

フォーム送信後、フォームフィールドの10 HTML:

<div class="form-group"> 
    <div class="field_with_errors"><label for="expense_duration_start_date">Start Date</label></div><br> 
    <div class="field_with_errors"><input data-provide="datepicker" type="text" name="expense_duration[start_date]" id="expense_duration_start_date" /></div> 
</div> 

<div class="form-group"> 
    <div class="field_with_errors"><label for="expense_duration_end_date">End Date</label></div><br> 
    <div class="field_with_errors"><input data-provide="datepicker" type="text" name="expense_duration[end_date]" id="expense_duration_end_date" /></div> 
</div> 

ので.field_with_errorsクラスが適用されつつあるが、それは単にスタイルされていない、と@extend .has-error;のCSSが動作していない理由を私は知りません。これをどうやって解決するのですか?

答えて

1

以下の解決策。最も重要なのは、すべての関連クラスが確実に含まれるようにすることでした。具体的には、form-groupクラス、control-labelクラスおよびform-controlクラス:

<div class="row"> 
    <div class="form-group col-sm-2"> 
    <%= f.label :start_date, "Start Date", class: "control-label" %><br> 
    <%= f.text_field :start_date, data: {provide: 'datepicker'}, class: "form-control" %> 
    </div> 
</div> 

<div class="row"> 
    <div class="form-group col-sm-2"> 
    <%= f.label :end_date, "End Date", class: "control-label" %><br> 
    <%= f.text_field :end_date, data: {provide: 'datepicker'}, class: "form-control" %> 
    </div> 
</div> 
関連する問題