読者です 読者をやめる 読者になる 読者になる

tkymtk's blog

Ruby on Rails及びその周辺について調べたこと。Do whatever you want to do at your own pace.

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

CSS

.field_with_errors {
  @extend .has-error;
}

解説

  • Railsはエラーが出たフォームの欄に、自動でfield_with_errorsというクラスを付ける。
  • なので、field_with_errorscssを追加してやれば良い。
  • 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>

おまけ

Railsでbootstrapをつかうには、Gemfileに

gem 'bootstrap-sass'

と指定して、コンソールで

$ bundle

さらに、cssファイルに以下を追加

@import "bootstrap";     

リンク

参照

間違いがあれば、ご指摘下さると幸いです。