フォームが送信され、エラーが発生した場合:ブートストラップ・エラー/アラート・スタイリングで問題のあるフィールドを強調表示したい。すぐに使用可能:ブートストラップは、従来の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が動作していない理由を私は知りません。これをどうやって解決するのですか?