Rails: フォームのエラーが出た欄を、Bootstrapを使ってスタイリングする方法

CSS

.field_with_errors {
  @extend .has-error;
}

解説

Railsはエラーが出たフォームの欄に、自動でfield_with_errorsというクラスを付ける。
なので、field_with_errorsにcssを追加してやれば良い。
bootstrapのcssを適用するために、sassの@extendを使う。
@extendには、適用したいスタイルを持つbootstrapのクラスを指定する。ここでの場合、bootstrapの.has-errorを適用している。
これでエラー時のCSSにbootstrapのCSSを適用することができた。

f:id:tkymtk:20131216183904p:plain

HTML 比較

エラーなし

<div class="form-group">
  <label class="control-label" for="user_name">Name</label>
  <input class="form-control" id="user_name" name="user[name]" type="text">
</div>

エラーあり

<div class="form-group">
  <div class="field_with_errors">
    <label class="control-label" for="user_name">Name</label>
  </div>
  <div class="field_with_errors">
    <input class="form-control" id="user_name" name="user[name]" value="" type="text">
  </div>
</div>