bootstrap_form 4.1.0 → 4.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +18 -0
- data/.rubocop.yml +3 -2
- data/.travis.yml +7 -1
- data/CHANGELOG.md +15 -1
- data/CONTRIBUTING.md +11 -0
- data/Dangerfile +4 -4
- data/Gemfile +7 -2
- data/OLD-README.md +795 -0
- data/README.md +150 -93
- data/Rakefile +2 -4
- data/bootstrap_form.gemspec +2 -1
- data/demo/.postcssrc.yml +3 -0
- data/demo/app/assets/config/manifest.js +2 -0
- data/demo/app/assets/stylesheets/actiontext.scss +38 -0
- data/demo/app/assets/stylesheets/application.scss +1 -0
- data/demo/app/helpers/bootstrap_helper.rb +16 -10
- data/demo/app/javascript/channels/consumer.js +6 -0
- data/demo/app/javascript/channels/index.js +5 -0
- data/demo/app/javascript/packs/application.js +11 -0
- data/demo/app/models/user.rb +2 -0
- data/demo/app/views/active_storage/blobs/_blob.html.erb +14 -0
- data/demo/app/views/bootstrap/form.html.erb +2 -1
- data/demo/app/views/layouts/application.html.erb +3 -0
- data/demo/bin/webpack +15 -0
- data/demo/bin/webpack-dev-server +15 -0
- data/demo/config/application.rb +2 -3
- data/demo/config/environments/development.rb +3 -1
- data/demo/config/environments/production.rb +48 -0
- data/demo/config/webpack/development.js +5 -0
- data/demo/config/webpack/environment.js +3 -0
- data/demo/config/webpack/production.js +5 -0
- data/demo/config/webpack/test.js +5 -0
- data/demo/config/webpacker.yml +92 -0
- data/demo/db/schema.rb +63 -18
- data/demo/package.json +13 -1
- data/demo/test/fixtures/action_text/rich_texts.yml +4 -0
- data/demo/yarn.lock +6257 -0
- data/lib/bootstrap_form.rb +34 -8
- data/lib/bootstrap_form/action_view_extensions/form_helper.rb +71 -0
- data/lib/bootstrap_form/components.rb +17 -0
- data/lib/bootstrap_form/components/hints.rb +60 -0
- data/lib/bootstrap_form/components/labels.rb +56 -0
- data/lib/bootstrap_form/components/layout.rb +39 -0
- data/lib/bootstrap_form/components/validation.rb +61 -0
- data/lib/bootstrap_form/engine.rb +10 -0
- data/lib/bootstrap_form/form_builder.rb +54 -524
- data/lib/bootstrap_form/form_group.rb +64 -0
- data/lib/bootstrap_form/form_group_builder.rb +103 -0
- data/lib/bootstrap_form/helpers.rb +9 -0
- data/lib/bootstrap_form/helpers/bootstrap.rb +39 -31
- data/lib/bootstrap_form/inputs.rb +40 -0
- data/lib/bootstrap_form/inputs/base.rb +40 -0
- data/lib/bootstrap_form/inputs/check_box.rb +89 -0
- data/lib/bootstrap_form/inputs/collection_check_boxes.rb +23 -0
- data/lib/bootstrap_form/inputs/collection_radio_buttons.rb +21 -0
- data/lib/bootstrap_form/inputs/collection_select.rb +25 -0
- data/lib/bootstrap_form/inputs/color_field.rb +14 -0
- data/lib/bootstrap_form/inputs/date_field.rb +14 -0
- data/lib/bootstrap_form/inputs/date_select.rb +14 -0
- data/lib/bootstrap_form/inputs/datetime_field.rb +14 -0
- data/lib/bootstrap_form/inputs/datetime_local_field.rb +14 -0
- data/lib/bootstrap_form/inputs/datetime_select.rb +14 -0
- data/lib/bootstrap_form/inputs/email_field.rb +14 -0
- data/lib/bootstrap_form/inputs/file_field.rb +35 -0
- data/lib/bootstrap_form/inputs/grouped_collection_select.rb +29 -0
- data/lib/bootstrap_form/inputs/inputs_collection.rb +44 -0
- data/lib/bootstrap_form/inputs/month_field.rb +14 -0
- data/lib/bootstrap_form/inputs/number_field.rb +14 -0
- data/lib/bootstrap_form/inputs/password_field.rb +14 -0
- data/lib/bootstrap_form/inputs/phone_field.rb +14 -0
- data/lib/bootstrap_form/inputs/radio_button.rb +77 -0
- data/lib/bootstrap_form/inputs/range_field.rb +14 -0
- data/lib/bootstrap_form/inputs/rich_text_area.rb +23 -0
- data/lib/bootstrap_form/inputs/search_field.rb +14 -0
- data/lib/bootstrap_form/inputs/select.rb +22 -0
- data/lib/bootstrap_form/inputs/telephone_field.rb +14 -0
- data/lib/bootstrap_form/inputs/text_area.rb +14 -0
- data/lib/bootstrap_form/inputs/text_field.rb +14 -0
- data/lib/bootstrap_form/inputs/time_field.rb +14 -0
- data/lib/bootstrap_form/inputs/time_select.rb +14 -0
- data/lib/bootstrap_form/inputs/time_zone_select.rb +22 -0
- data/lib/bootstrap_form/inputs/url_field.rb +14 -0
- data/lib/bootstrap_form/inputs/week_field.rb +14 -0
- data/lib/bootstrap_form/version.rb +1 -1
- metadata +79 -6
- data/.rubocop_todo.yml +0 -104
- data/lib/bootstrap_form/aliasing.rb +0 -35
- data/lib/bootstrap_form/helper.rb +0 -52
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3eb9dd9edad01a3b8fc83d83506c4a9a19d70f849620dde77847baaaa0231b9a
|
4
|
+
data.tar.gz: 942e9b16f5ffe3873e49defc113255c61939e479621c25ed5846348b2bdfe304
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e61107ff84b13b61270438556d0320c94a1f395b5acdb9221122ba89078c7dca3c0d96b3f2db8bc5e3c7e0cdca4eb124f0bb5944fd47be31a9a217ad6a714716
|
7
|
+
data.tar.gz: 55b15e5a89aa152ad0c2ca05e1bfb6fc99c15f0e1b5235ad6a0d41df0429097e775d3c006ed59e0773e9b397d2c7332fb57334bc577a47331eebff0c7dff75b8
|
data/.gitignore
CHANGED
@@ -12,3 +12,21 @@ test/gemfiles/*.lock
|
|
12
12
|
.ruby-version
|
13
13
|
Vagrantfile
|
14
14
|
.vagrant
|
15
|
+
|
16
|
+
// For the demo app.
|
17
|
+
|
18
|
+
# Ignore uploaded files in development.
|
19
|
+
demo/storage/*
|
20
|
+
!demo/storage/.keep
|
21
|
+
|
22
|
+
demo/public/assets
|
23
|
+
.byebug_history
|
24
|
+
|
25
|
+
# Ignore master key for decrypting credentials and more.
|
26
|
+
demo/config/master.key
|
27
|
+
demo/public/packs
|
28
|
+
demo/public/packs-test
|
29
|
+
demo/node_modules
|
30
|
+
demo/yarn-error.log
|
31
|
+
demo/yarn-debug.log*
|
32
|
+
demo/.yarn-integrity
|
data/.rubocop.yml
CHANGED
@@ -7,17 +7,18 @@ AllCops:
|
|
7
7
|
Exclude:
|
8
8
|
- "bin/*"
|
9
9
|
- Capfile
|
10
|
+
- demo/bin/*
|
11
|
+
- "demo/bower_components/**/*"
|
10
12
|
- demo/config/boot.rb
|
11
13
|
- demo/config/environment.rb
|
12
14
|
- demo/config/initializers/version.rb
|
13
15
|
- demo/db/schema.rb
|
14
16
|
- "demo/node_modules/**/*"
|
15
|
-
-
|
17
|
+
- demo/Rakefile
|
16
18
|
- "demo/tmp/**/*"
|
17
19
|
- "demo/vendor/**/*"
|
18
20
|
- Gemfile
|
19
21
|
- Guardfile
|
20
|
-
- demo/Rakefile
|
21
22
|
- Rakefile
|
22
23
|
|
23
24
|
Layout/SpaceAroundEqualsInParameterDefault:
|
data/.travis.yml
CHANGED
@@ -16,10 +16,14 @@ script:
|
|
16
16
|
|
17
17
|
matrix:
|
18
18
|
include:
|
19
|
-
# Bleeding edge
|
19
|
+
# Bleeding edge Ruby
|
20
20
|
- rvm: ruby-head
|
21
21
|
gemfile: test/gemfiles/5.2.gemfile
|
22
22
|
|
23
|
+
# Next version of Rails
|
24
|
+
- rvm: 2.5.0
|
25
|
+
gemfile: test/gemfiles/6.0.gemfile
|
26
|
+
|
23
27
|
# Running one job to execute DANGER bot and linting
|
24
28
|
- rvm: 2.5.0
|
25
29
|
gemfile: test/gemfiles/5.2.gemfile
|
@@ -30,3 +34,5 @@ matrix:
|
|
30
34
|
|
31
35
|
allow_failures:
|
32
36
|
- rvm: ruby-head
|
37
|
+
- rvm: 2.5.0
|
38
|
+
gemfile: test/gemfiles/6.0.gemfile
|
data/CHANGELOG.md
CHANGED
@@ -12,6 +12,19 @@
|
|
12
12
|
|
13
13
|
* Your contribution here!
|
14
14
|
|
15
|
+
## [4.2.0][] (2019-03-08)
|
16
|
+
|
17
|
+
### New features
|
18
|
+
|
19
|
+
* [#508] Support `rich_text_area` AKA the Trix editor on Rails 6+.
|
20
|
+
* [#518] Move all inputs to separate, more maintainable files.
|
21
|
+
* [#514](https://github.com/bootstrap-ruby/bootstrap_form/pull/514): Add support for BS 4.2 switches - [@simmerz](https://github.com/simmerz)
|
22
|
+
|
23
|
+
### Bugfixes
|
24
|
+
|
25
|
+
* [#522](https://github.com/bootstrap-ruby/bootstrap_form/pull/522): Clean up rubocop offences - [@simmerz](https://github.com/simmerz)
|
26
|
+
* [#524](https://github.com/bootstrap-ruby/bootstrap_form/pull/524): Fix non-inline layout rendering without help text - [@simmerz](https://github.com/simmerz)
|
27
|
+
|
15
28
|
## [4.1.0][] (2019-01-19)
|
16
29
|
|
17
30
|
### New features
|
@@ -255,7 +268,8 @@ Features:
|
|
255
268
|
- Added support for bootstrap_form_tag (@baldwindavid)
|
256
269
|
|
257
270
|
|
258
|
-
[Pending Release]: https://github.com/bootstrap-ruby/bootstrap_form/compare/v4.
|
271
|
+
[Pending Release]: https://github.com/bootstrap-ruby/bootstrap_form/compare/v4.2.0...HEAD
|
272
|
+
[4.2.0]: https://github.com/bootstrap-ruby/bootstrap_form/compare/v4.1.0...v4.2.0
|
259
273
|
[4.1.0]: https://github.com/bootstrap-ruby/bootstrap_form/compare/v4.0.0...v4.1.0
|
260
274
|
[4.0.0]: https://github.com/bootstrap-ruby/bootstrap_form/compare/v4.0.0.alpha1...v4.0.0
|
261
275
|
[4.0.0.alpha1]: https://github.com/bootstrap-ruby/bootstrap_form/compare/v2.7.0...v4.0.0.alpha1
|
data/CONTRIBUTING.md
CHANGED
@@ -84,3 +84,14 @@ We are an entirely volunteer project. Sometimes it's hard for people to find the
|
|
84
84
|
---
|
85
85
|
|
86
86
|
Thanks to all the great contributors over the years: https://github.com/bootstrap-ruby/bootstrap_form/graphs/contributors
|
87
|
+
|
88
|
+
## Troubleshooting
|
89
|
+
### Models and Database Tables
|
90
|
+
`bootstrap_form` needs a few models and tables to support testing. It appears that the necessary tables were created via the `demo/db/schema.rb` file. To support `rich_text_area`, Rails 6 creates some migrations. These migrations had to be run in the existing database (not an empty one) to create a new `schema.rb` that creates the `bootstrap_form` test tables, and the tables needed by Rails 6. The `schema.rb` file was checked in to GitHub, but the migrations were not.
|
91
|
+
|
92
|
+
In the future, any new Rails functionality that creates tables would likely have to be prepared the same way:
|
93
|
+
```
|
94
|
+
cd demo
|
95
|
+
rails db:setup # create the databases from `schema.rb`
|
96
|
+
rails db:migrate # add the new tables and create a new `schema.rb`
|
97
|
+
```
|
data/Dangerfile
CHANGED
@@ -30,11 +30,11 @@ end
|
|
30
30
|
# ------------------------------------------------------------------------------
|
31
31
|
if !has_changelog_changes && has_lib_changes
|
32
32
|
markdown <<-MARKDOWN
|
33
|
-
Here's an example of a CHANGELOG.md entry (place it immediately under the `* Your contribution here!` line):
|
33
|
+
Here's an example of a CHANGELOG.md entry (place it immediately under the `* Your contribution here!` line):
|
34
34
|
|
35
|
-
```markdown
|
36
|
-
* [##{pr_number}](#{pr_url}): #{github.pr_title} - [@#{github.pr_author}](https://github.com/#{github.pr_author}).
|
37
|
-
```
|
35
|
+
```markdown
|
36
|
+
* [##{pr_number}](#{pr_url}): #{github.pr_title} - [@#{github.pr_author}](https://github.com/#{github.pr_author}).
|
37
|
+
```
|
38
38
|
MARKDOWN
|
39
39
|
warn("Please update CHANGELOG.md with a description of your changes. "\
|
40
40
|
"If this PR is not a user-facing change (e.g. just refactoring), "\
|
data/Gemfile
CHANGED
@@ -3,12 +3,15 @@ source "http://rubygems.org"
|
|
3
3
|
gemspec
|
4
4
|
|
5
5
|
# Uncomment and change rails version for testing purposes
|
6
|
-
|
6
|
+
gem "rails", "~> 5.2.0"
|
7
|
+
# gem "rails", "~> 6.0.0.beta1"
|
7
8
|
|
8
9
|
group :development do
|
9
10
|
gem "chandler", ">= 0.7.0"
|
10
11
|
gem "htmlbeautifier"
|
11
12
|
gem "rubocop", require: false
|
13
|
+
gem "sass-rails"
|
14
|
+
gem 'webpacker', '>= 4.0.0.rc.3'
|
12
15
|
end
|
13
16
|
|
14
17
|
group :test do
|
@@ -18,6 +21,8 @@ group :test do
|
|
18
21
|
gem "diffy"
|
19
22
|
gem "equivalent-xml"
|
20
23
|
gem "mocha"
|
21
|
-
|
24
|
+
# sqlite3 1.4.0 breaks the test suite.
|
25
|
+
# https://github.com/rails/rails/pull/35154
|
26
|
+
gem "sqlite3", "~> 1.3.6"
|
22
27
|
gem "timecop", "~> 0.7.1"
|
23
28
|
end
|
data/OLD-README.md
ADDED
@@ -0,0 +1,795 @@
|
|
1
|
+
⚠️ **This documentation is for the master branch, which targets Bootstrap v4.** If you are using Bootstrap v3, refer to the stable [legacy-2.7](https://github.com/bootstrap-ruby/bootstrap_form/tree/legacy-2.7) branch.
|
2
|
+
|
3
|
+
Try our new [README](/README.md)
|
4
|
+
|
5
|
+
---
|
6
|
+
|
7
|
+
# bootstrap_form
|
8
|
+
|
9
|
+
[![Build Status](https://travis-ci.org/bootstrap-ruby/bootstrap_form.svg?branch=master)](https://travis-ci.org/bootstrap-ruby/bootstrap_form)
|
10
|
+
[![Gem Version](https://badge.fury.io/rb/bootstrap_form.svg)](https://rubygems.org/gems/bootstrap_form)
|
11
|
+
|
12
|
+
**bootstrap_form** is a Rails form builder that makes it super easy to integrate
|
13
|
+
Bootstrap v4-style forms into your Rails application.
|
14
|
+
|
15
|
+
## Requirements
|
16
|
+
|
17
|
+
* Ruby 2.2.2+
|
18
|
+
* Rails 5.0+ (Rails 5.1+ for `bootstrap_form_with`)
|
19
|
+
* Bootstrap 4.0.0+
|
20
|
+
|
21
|
+
## Installation
|
22
|
+
|
23
|
+
Add it to your Gemfile:
|
24
|
+
|
25
|
+
```ruby
|
26
|
+
gem "bootstrap_form", ">= 4.1.0"
|
27
|
+
```
|
28
|
+
|
29
|
+
Then:
|
30
|
+
|
31
|
+
`bundle`
|
32
|
+
|
33
|
+
Then require the CSS in your `application.css` file:
|
34
|
+
|
35
|
+
```css
|
36
|
+
/*
|
37
|
+
*= require rails_bootstrap_forms
|
38
|
+
*/
|
39
|
+
```
|
40
|
+
|
41
|
+
## Usage
|
42
|
+
|
43
|
+
To get started, just use the `bootstrap_form_for` helper. Here's an example:
|
44
|
+
|
45
|
+
```erb
|
46
|
+
<%= bootstrap_form_for(@user) do |f| %>
|
47
|
+
<%= f.email_field :email %>
|
48
|
+
<%= f.password_field :password %>
|
49
|
+
<%= f.check_box :remember_me %>
|
50
|
+
<%= f.submit "Log In" %>
|
51
|
+
<% end %>
|
52
|
+
```
|
53
|
+
|
54
|
+
This generates the following HTML:
|
55
|
+
|
56
|
+
```html
|
57
|
+
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
|
58
|
+
<div class="form-group">
|
59
|
+
<label for="user_email">Email</label>
|
60
|
+
<input class="form-control" id="user_email" name="user[email]" type="email">
|
61
|
+
</div>
|
62
|
+
<div class="form-group">
|
63
|
+
<label for="user_password">Password</label>
|
64
|
+
<input class="form-control" id="user_password" name="user[password]" type="password">
|
65
|
+
</div>
|
66
|
+
<div class="form-check">
|
67
|
+
<input name="user[remember_me]" type="hidden" value="0">
|
68
|
+
<input class="form-check-input" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
|
69
|
+
<label class="form-check-label" for="user_remember_me">Remember me</label>
|
70
|
+
</div>
|
71
|
+
<input class="btn btn-secondary" name="commit" type="submit" value="Log In">
|
72
|
+
</form>
|
73
|
+
```
|
74
|
+
|
75
|
+
### bootstrap_form_tag
|
76
|
+
|
77
|
+
If your form is not backed by a model, use the `bootstrap_form_tag`. Usage of this helper is the same as `bootstrap_form_for`, except no model object is passed in as the first argument. Here's an example:
|
78
|
+
|
79
|
+
```erb
|
80
|
+
<%= bootstrap_form_tag url: '/subscribe' do |f| %>
|
81
|
+
<%= f.email_field :email, value: 'name@example.com' %>
|
82
|
+
<%= f.submit %>
|
83
|
+
<% end %>
|
84
|
+
```
|
85
|
+
|
86
|
+
### `bootstrap_form_with` (Rails 5.1+)
|
87
|
+
|
88
|
+
Note that `form_with` in Rails 5.1 does not add IDs to form elements and labels by default, which are both important to Bootstrap markup. This behavior is corrected in Rails 5.2.
|
89
|
+
|
90
|
+
To get started, just use the `bootstrap_form_with` helper in place of `form_with`. Here's an example:
|
91
|
+
|
92
|
+
```erb
|
93
|
+
<%= bootstrap_form_with(model: @user, local: true) do |f| %>
|
94
|
+
<%= f.email_field :email %>
|
95
|
+
<%= f.password_field :password %>
|
96
|
+
<%= f.check_box :remember_me %>
|
97
|
+
<%= f.submit "Log In" %>
|
98
|
+
<% end %>
|
99
|
+
```
|
100
|
+
|
101
|
+
This generates:
|
102
|
+
|
103
|
+
```html
|
104
|
+
<form role="form" action="/users" accept-charset="UTF-8" method="post">
|
105
|
+
<input name="utf8" type="hidden" value="✓" />
|
106
|
+
<div class="form-group">
|
107
|
+
<label class="required" for="user_email">Email</label>
|
108
|
+
<input class="form-control" type="email" value="steve@example.com" name="user[email]" />
|
109
|
+
</div>
|
110
|
+
<div class="form-group">
|
111
|
+
<label for="user_password">Password</label>
|
112
|
+
<input class="form-control" type="password" name="user[password]" />
|
113
|
+
<small class="form-text text-muted">A good password should be at least six characters long</small>
|
114
|
+
</div>
|
115
|
+
<div class="form-check">
|
116
|
+
<input name="user[remember_me]" type="hidden" value="0">
|
117
|
+
<input class="form-check-input" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
|
118
|
+
<label class="form-check-label" for="user_remember_me">Remember me</label>
|
119
|
+
</div>
|
120
|
+
<input type="submit" name="commit" value="Log In" class="btn btn-secondary" data-disable-with="Log In" />
|
121
|
+
</form>
|
122
|
+
```
|
123
|
+
|
124
|
+
`bootstrap_form_with` supports both the `model:` and `url:` use cases
|
125
|
+
in `form_with`.
|
126
|
+
|
127
|
+
`form_with` has some important differences compared to `form_for` and `form_tag`, and these differences apply to `bootstrap_form_with`. A good summary of the differences can be found at: https://m.patrikonrails.com/rails-5-1s-form-with-vs-old-form-helpers-3a5f72a8c78a, or in the [Rails documentation](api.rubyonrails.org).
|
128
|
+
|
129
|
+
### Future Compatibility
|
130
|
+
|
131
|
+
The Rails team has [suggested](https://github.com/rails/rails/issues/25197) that `form_for` and `form_tag` may be deprecated and then removed in future versions of Rails. `bootstrap_form` will continue to support `bootstrap_form_for` and `bootstrap_form_tag` as long as Rails supports `form_for` and `form_tag`.
|
132
|
+
|
133
|
+
## Form Helpers
|
134
|
+
|
135
|
+
This gem wraps the following Rails form helpers:
|
136
|
+
|
137
|
+
* check_box
|
138
|
+
* collection_check_boxes
|
139
|
+
* collection_select
|
140
|
+
* color_field
|
141
|
+
* date_field
|
142
|
+
* date_select
|
143
|
+
* datetime_field
|
144
|
+
* datetime_local_field
|
145
|
+
* datetime_select
|
146
|
+
* email_field
|
147
|
+
* file_field
|
148
|
+
* grouped_collection_select
|
149
|
+
* hidden_field (not wrapped, but supported)
|
150
|
+
* month_field
|
151
|
+
* number_field
|
152
|
+
* password_field
|
153
|
+
* phone_field
|
154
|
+
* radio_button
|
155
|
+
* collection_radio_buttons
|
156
|
+
* range_field
|
157
|
+
* rich_text_area (Rails 6+)
|
158
|
+
* search_field
|
159
|
+
* select
|
160
|
+
* telephone_field
|
161
|
+
* text_area
|
162
|
+
* text_field
|
163
|
+
* time_field
|
164
|
+
* time_select
|
165
|
+
* time_zone_select
|
166
|
+
* url_field
|
167
|
+
* week_field
|
168
|
+
* submit
|
169
|
+
* button
|
170
|
+
|
171
|
+
These helpers accept the same options as the standard Rails form helpers, with
|
172
|
+
a few extra options:
|
173
|
+
|
174
|
+
### Labels
|
175
|
+
|
176
|
+
Use the `label` option if you want to specify the field's label text:
|
177
|
+
|
178
|
+
```erb
|
179
|
+
<%= f.password_field :password_confirmation, label: "Confirm Password" %>
|
180
|
+
```
|
181
|
+
|
182
|
+
To hide a label, use the `hide_label: true` option. This adds the `sr-only`
|
183
|
+
class, which keeps your labels accessible to those using screen readers.
|
184
|
+
|
185
|
+
```erb
|
186
|
+
<%= f.text_area :comment, hide_label: true, placeholder: "Leave a comment..." %>
|
187
|
+
```
|
188
|
+
|
189
|
+
To add custom classes to the field's label:
|
190
|
+
|
191
|
+
```erb
|
192
|
+
<%= f.text_field :email, label_class: "custom-class" %>
|
193
|
+
```
|
194
|
+
|
195
|
+
Or you can add the label as input placeholder instead (this automatically hides the label):
|
196
|
+
|
197
|
+
```erb
|
198
|
+
<%= f.text_field :email, label_as_placeholder: true %>
|
199
|
+
```
|
200
|
+
|
201
|
+
#### Required Fields
|
202
|
+
|
203
|
+
A label that is associated with a required field is automatically annotated with
|
204
|
+
a `required` CSS class. You are free to add any appropriate CSS to style
|
205
|
+
required fields as desired. One example would be to automatically add an
|
206
|
+
asterisk to the end of the label:
|
207
|
+
|
208
|
+
```css
|
209
|
+
label.required:after {
|
210
|
+
content:" *";
|
211
|
+
}
|
212
|
+
```
|
213
|
+
|
214
|
+
The label `required` class is determined based on the definition of a presence
|
215
|
+
validator with the associated model attribute. Presently this is one of:
|
216
|
+
ActiveRecord::Validations::PresenceValidator or
|
217
|
+
ActiveModel::Validations::PresenceValidator.
|
218
|
+
|
219
|
+
In cases where this behavior is undesirable, use the `required` option to force the class to be present or absent:
|
220
|
+
|
221
|
+
```erb
|
222
|
+
<%= f.password_field :login, label: "New Username", required: true %>
|
223
|
+
<%= f.password_field :password, label: "New Password", required: false %>
|
224
|
+
```
|
225
|
+
|
226
|
+
### Input Elements / Controls
|
227
|
+
|
228
|
+
To specify the class of the generated input tag, use the `control_class` option:
|
229
|
+
|
230
|
+
```erb
|
231
|
+
<%= f.text_field :email, control_class: "custom-class" %>
|
232
|
+
```
|
233
|
+
|
234
|
+
### Help Text
|
235
|
+
|
236
|
+
To add help text, use the `help` option:
|
237
|
+
|
238
|
+
```erb
|
239
|
+
<%= f.password_field :password, help: "Must be at least 6 characters long" %>
|
240
|
+
```
|
241
|
+
|
242
|
+
This gem is also aware of help messages in locale translation files (i18n):
|
243
|
+
|
244
|
+
```yml
|
245
|
+
en:
|
246
|
+
activerecord:
|
247
|
+
help:
|
248
|
+
user:
|
249
|
+
password: "A good password should be at least six characters long"
|
250
|
+
```
|
251
|
+
|
252
|
+
Help translations containing HTML should follow the convention of appending `_html` to the name:
|
253
|
+
|
254
|
+
```yml
|
255
|
+
en:
|
256
|
+
activerecord:
|
257
|
+
help:
|
258
|
+
user:
|
259
|
+
password_html: "A <strong>good</strong> password should be at least six characters long"
|
260
|
+
```
|
261
|
+
|
262
|
+
If your model name has multiple words (like `SuperUser`), the key on the
|
263
|
+
translation file should be underscored (`super_user`).
|
264
|
+
|
265
|
+
You can override help translations for a particular field by passing the `help`
|
266
|
+
option or turn them off completely by passing `help: false`.
|
267
|
+
|
268
|
+
### Prepending and Appending Inputs
|
269
|
+
|
270
|
+
You can pass `prepend` and/or `append` options to input fields:
|
271
|
+
|
272
|
+
```erb
|
273
|
+
<%= f.text_field :price, prepend: "$", append: ".00" %>
|
274
|
+
```
|
275
|
+
|
276
|
+
You can also prepend and append buttons. Note: The buttons must contain the
|
277
|
+
`btn` class to generate the correct markup.
|
278
|
+
|
279
|
+
```erb
|
280
|
+
<%= f.text_field :search, append: link_to("Go", "#", class: "btn btn-secondary") %>
|
281
|
+
```
|
282
|
+
|
283
|
+
To add a class to the input group wrapper, use the `:input_group_class` option.
|
284
|
+
|
285
|
+
```erb
|
286
|
+
<%= f.email_field :email, append: f.primary('Subscribe'), input_group_class: 'input-group-lg' %>
|
287
|
+
```
|
288
|
+
|
289
|
+
### Additional Form Group Attributes
|
290
|
+
|
291
|
+
If you want to add an additional css class or any other attribute to the form group div, you can use
|
292
|
+
the `wrapper: { class: 'additional-class', data: { foo: 'bar' } }` option.
|
293
|
+
|
294
|
+
```erb
|
295
|
+
<%= f.text_field :name, wrapper: { class: 'has-warning', data: { foo: 'bar' } } %>
|
296
|
+
```
|
297
|
+
|
298
|
+
Which produces the following output:
|
299
|
+
|
300
|
+
```erb
|
301
|
+
<div class="form-group has-warning" data-foo="bar">
|
302
|
+
<label class="form-control-label" for="user_name">Id</label>
|
303
|
+
<input class="form-control" id="user_name" name="user[name]" type="text">
|
304
|
+
</div>
|
305
|
+
```
|
306
|
+
|
307
|
+
You still can use `wrapper_class` option to set only a css class. This is just a short form of `wrapper: { class: 'additional-class' }`.
|
308
|
+
|
309
|
+
### Suppressing the Form Group Altogether
|
310
|
+
|
311
|
+
You may have want to define your own form group div around a field. To do so, add the option `wrapper: false` to the input field. For example:
|
312
|
+
|
313
|
+
```
|
314
|
+
f.form_group :user do
|
315
|
+
f.email_field :email, wrapper: false
|
316
|
+
end
|
317
|
+
```
|
318
|
+
|
319
|
+
Note that Bootstrap relies on the form group div to correctly format most fields, so if you use the `wrapper: false` option, you should provide your own form group div around the input field. You can write your own HTML, or use the `form_group` helper.
|
320
|
+
|
321
|
+
### Selects
|
322
|
+
|
323
|
+
Our select helper accepts the same arguments as the [default Rails helper](http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-select). Here's an example of how you pass both options and html_options hashes:
|
324
|
+
|
325
|
+
```erb
|
326
|
+
<%= f.select :product, [["Apple", 1], ["Grape", 2]], { label: "Choose your favorite fruit:", wrapper: { class: 'has-warning', data: { foo: 'bar' } } }, { class: "selectpicker" } %>
|
327
|
+
```
|
328
|
+
|
329
|
+
### Checkboxes and Radios
|
330
|
+
|
331
|
+
Checkboxes and radios should be placed inside of a `form_group` to render
|
332
|
+
properly. The following example ensures that the entire form group will display
|
333
|
+
an error if an associated validations fails:
|
334
|
+
|
335
|
+
```erb
|
336
|
+
<%= f.form_group :skill_level, label: { text: "Skill" }, help: "Optional Help Text" do %>
|
337
|
+
<%= f.radio_button :skill_level, 0, label: "Novice", checked: true %>
|
338
|
+
<%= f.radio_button :skill_level, 1, label: "Intermediate" %>
|
339
|
+
<%= f.radio_button :skill_level, 2, label: "Advanced" %>
|
340
|
+
<% end %>
|
341
|
+
|
342
|
+
<%= f.form_group :terms do %>
|
343
|
+
<%= f.check_box :terms, label: "I agree to the Terms of Service" %>
|
344
|
+
<% end %>
|
345
|
+
```
|
346
|
+
|
347
|
+
You can also create a checkbox using a block:
|
348
|
+
|
349
|
+
```erb
|
350
|
+
<%= f.form_group :terms, label: { text: "Optional Label" } do %>
|
351
|
+
<%= f.check_box :terms do %>
|
352
|
+
You need to check this box to accept our terms of service and privacy policy
|
353
|
+
<% end %>
|
354
|
+
<% end %>
|
355
|
+
```
|
356
|
+
|
357
|
+
To display checkboxes and radios inline, pass the `inline: true` option:
|
358
|
+
|
359
|
+
```erb
|
360
|
+
<%= f.form_group :skill_level, label: { text: "Skill" } do %>
|
361
|
+
<%= f.radio_button :skill_level, 0, label: "Novice", inline: true %>
|
362
|
+
<%= f.radio_button :skill_level, 1, label: "Intermediate", inline: true %>
|
363
|
+
<%= f.radio_button :skill_level, 2, label: "Advanced", inline: true %>
|
364
|
+
<% end %>
|
365
|
+
```
|
366
|
+
|
367
|
+
Check boxes and radio buttons are wrapped in a `div.form-check`. You can add classes to this `div` with the `:wrapper_class` option:
|
368
|
+
|
369
|
+
```erb
|
370
|
+
<%= f.radio_button :skill_level, 0, label: "Novice", inline: true, wrapper_class: "w-auto" %>
|
371
|
+
```
|
372
|
+
#### Switches
|
373
|
+
|
374
|
+
To render checkboxes as switches with Bootstrap 4.2+, add the proper wrapper class:
|
375
|
+
|
376
|
+
```erb
|
377
|
+
<%= f.check_box :remember_me, custom: true, wrapper_class: 'custom-switch' %>
|
378
|
+
```
|
379
|
+
|
380
|
+
#### Collections
|
381
|
+
|
382
|
+
`bootstrap_form` also provides helpers that automatically create the
|
383
|
+
`form_group` and the `radio_button`s or `check_box`es for you:
|
384
|
+
|
385
|
+
```erb
|
386
|
+
<%= f.collection_radio_buttons :skill_level, Skill.all, :id, :name %>
|
387
|
+
<%= f.collection_check_boxes :skills, Skill.all, :id, :name %>
|
388
|
+
```
|
389
|
+
|
390
|
+
Collection methods accept these options:
|
391
|
+
* `:label`: Customize the `form_group`'s label
|
392
|
+
* `:hide_label`: Pass true to hide the `form_group`'s label
|
393
|
+
* `:help`: Add a help span to the `form_group`
|
394
|
+
* Other options will be forwarded to the `radio_button`/`check_box` method
|
395
|
+
|
396
|
+
### Static Controls
|
397
|
+
|
398
|
+
You can create a static control like this:
|
399
|
+
|
400
|
+
```erb
|
401
|
+
<%= f.static_control :email %>
|
402
|
+
```
|
403
|
+
|
404
|
+
Here's the output for a horizontal layout:
|
405
|
+
|
406
|
+
```html
|
407
|
+
<div class="form-group">
|
408
|
+
<label class="col-sm-2 form-control-label" for="user_email">Email</label>
|
409
|
+
<div class="col-sm-10">
|
410
|
+
<input class="form-control-plaintext" id="user_email" name="user[email]" readonly="readonly" type="text" value="test@email.com"/>
|
411
|
+
</div>
|
412
|
+
</div>
|
413
|
+
```
|
414
|
+
|
415
|
+
You can also create a static control that isn't based on a model attribute:
|
416
|
+
|
417
|
+
```erb
|
418
|
+
<%= f.static_control label: "Custom Static Control" value: "Content Here" %>
|
419
|
+
```
|
420
|
+
Prior to version 4 of `bootstrap_form`, you could pass a block to the `static_control` method.
|
421
|
+
The value of the block would be used for the content of the static "control".
|
422
|
+
Bootstrap 4 actually creates and styles a disabled input field for static controls, so the value of the control has to be specified by the `value:` option.
|
423
|
+
Passing a block to `static_control` no longer has any effect.
|
424
|
+
|
425
|
+
### Date Helpers
|
426
|
+
|
427
|
+
The multiple selects that the date and time helpers (`date_select`,
|
428
|
+
`time_select`, `datetime_select`) generate are wrapped inside a
|
429
|
+
`div.rails-bootstrap-forms-[date|time|datetime]-select` tag. This is because
|
430
|
+
Bootstrap automatically styles our controls as `block`s. This wrapper fixes
|
431
|
+
this defining these selects as `inline-block` and a width of `auto`.
|
432
|
+
|
433
|
+
### Submit Buttons
|
434
|
+
|
435
|
+
The `btn btn-secondary` CSS classes are automatically added to your submit
|
436
|
+
buttons.
|
437
|
+
|
438
|
+
```erb
|
439
|
+
<%= f.submit %>
|
440
|
+
```
|
441
|
+
|
442
|
+
You can also use the `primary` helper, which adds `btn btn-primary` to your
|
443
|
+
submit button:
|
444
|
+
|
445
|
+
```erb
|
446
|
+
<%= f.primary "Optional Label" %>
|
447
|
+
```
|
448
|
+
|
449
|
+
You can specify your own classes like this:
|
450
|
+
|
451
|
+
```erb
|
452
|
+
<%= f.submit "Log In", class: "btn btn-success" %>
|
453
|
+
```
|
454
|
+
|
455
|
+
If the `primary` helper receives a `render_as_button: true` option or a block,
|
456
|
+
it will be rendered as an HTML button, instead of an input tag. This allows you
|
457
|
+
to specify HTML content and styling for your buttons (such as adding
|
458
|
+
illustrative icons to them). For example, the following statements
|
459
|
+
|
460
|
+
```erb
|
461
|
+
<%= f.primary "Save changes <span class='fa fa-save'></span>".html_safe, render_as_button: true %>
|
462
|
+
|
463
|
+
<%= f.primary do
|
464
|
+
concat 'Save changes '
|
465
|
+
concat content_tag(:span, nil, class: 'fa fa-save')
|
466
|
+
end %>
|
467
|
+
```
|
468
|
+
|
469
|
+
are equivalent, and each of them both be rendered as
|
470
|
+
|
471
|
+
```html
|
472
|
+
<button name="button" type="submit" class="btn btn-primary">Save changes <span class="fa fa-save"></span></button>
|
473
|
+
```
|
474
|
+
|
475
|
+
If you wish to add additional CSS classes to your button, while keeping the
|
476
|
+
default ones, you can use the `extra_class` option. This is particularly useful
|
477
|
+
for adding extra details to buttons (without forcing you to repeat the
|
478
|
+
Bootstrap classes), or for element targeting via CSS classes.
|
479
|
+
Be aware, however, that using the `class` option will discard any extra classes
|
480
|
+
you add. As an example, the following button declarations
|
481
|
+
|
482
|
+
```erb
|
483
|
+
<%= f.primary "My Nice Button", extra_class: 'my-button' %>
|
484
|
+
|
485
|
+
<%= f.primary "My Button", class: 'my-button' %>
|
486
|
+
```
|
487
|
+
|
488
|
+
will be rendered as
|
489
|
+
|
490
|
+
```html
|
491
|
+
<input type="submit" value="My Nice Button" class="btn btn-primary my-button" />
|
492
|
+
|
493
|
+
<input type="submit" value="My Button" class="my-button" />
|
494
|
+
```
|
495
|
+
|
496
|
+
(some unimportant HTML attributes have been removed for simplicity)
|
497
|
+
|
498
|
+
### Rich Text Areas AKA Trix Editor
|
499
|
+
If you're using Rails 6, and `bootstrap_form` from the master branch on GitHub,
|
500
|
+
`bootstrap_form` supports the `rich_text_area` helper.
|
501
|
+
|
502
|
+
```
|
503
|
+
<%= f.rich_text_area(:life_story) %>
|
504
|
+
```
|
505
|
+
will be rendered as:
|
506
|
+
```
|
507
|
+
<div class="form-group">
|
508
|
+
<label for="user_life_story">Life story</label>
|
509
|
+
<input type="hidden" name="user[life_story]" id="user_life_story_trix_input_user"/>
|
510
|
+
<trix-editor id="user_life_story" data-blob-url-template="http://test.host/rails/active_storage/blobs/:signed_id/:filename" data-direct-upload-url="http://test.host/rails/active_storage/direct_uploads" input="user_life_story_trix_input_user" class="trix-content form-control"/>
|
511
|
+
</trix-editor>
|
512
|
+
</div>
|
513
|
+
```
|
514
|
+
|
515
|
+
To use `bootstrap_form` from the master branch of GitHub, change the `bootstrap_form` line in your `Gemfile` to:
|
516
|
+
```
|
517
|
+
gem "bootstrap_form", git: "https://github.com/bootstrap-ruby/bootstrap_form"
|
518
|
+
```
|
519
|
+
|
520
|
+
Support for `rich_text_area` is highly experimental at this time.
|
521
|
+
Please submit bugs to the [issue tracker](https://github.com/bootstrap-ruby/bootstrap_form/issues).
|
522
|
+
|
523
|
+
### Accessing Rails Form Helpers
|
524
|
+
|
525
|
+
If you want to use the original Rails form helpers for a particular field,
|
526
|
+
append `_without_bootstrap` to the helper:
|
527
|
+
|
528
|
+
```erb
|
529
|
+
<%= f.text_field_without_bootstrap :email %>
|
530
|
+
```
|
531
|
+
|
532
|
+
## Form Styles
|
533
|
+
|
534
|
+
By default, your forms will stack labels on top of controls and your controls
|
535
|
+
will grow to 100% of the available width.
|
536
|
+
|
537
|
+
### Inline Forms
|
538
|
+
|
539
|
+
To use an inline-layout form, use the `layout: :inline` option. To hide labels,
|
540
|
+
use the `hide_label: true` option, which keeps your labels accessible to those
|
541
|
+
using screen readers.
|
542
|
+
|
543
|
+
```erb
|
544
|
+
<%= bootstrap_form_for(@user, layout: :inline) do |f| %>
|
545
|
+
<%= f.email_field :email, hide_label: true %>
|
546
|
+
<%= f.password_field :password, hide_label: true %>
|
547
|
+
<%= f.check_box :remember_me %>
|
548
|
+
<%= f.submit %>
|
549
|
+
<% end %>
|
550
|
+
```
|
551
|
+
|
552
|
+
To skip label rendering at all, use `skip_label: true` option.
|
553
|
+
|
554
|
+
```erb
|
555
|
+
<%= f.password_field :password, skip_label: true %>
|
556
|
+
```
|
557
|
+
|
558
|
+
### Horizontal Forms
|
559
|
+
|
560
|
+
To use a horizontal-layout form with labels to the left of the control, use the
|
561
|
+
`layout: :horizontal` option. You should specify both `label_col` and
|
562
|
+
`control_col` css classes as well (they default to `col-sm-2` and `col-sm-10`).
|
563
|
+
|
564
|
+
In the example below, the checkbox and submit button have been wrapped in a
|
565
|
+
`form_group` to keep them properly aligned.
|
566
|
+
|
567
|
+
```erb
|
568
|
+
<%= bootstrap_form_for(@user, layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-10") do |f| %>
|
569
|
+
<%= f.email_field :email %>
|
570
|
+
<%= f.password_field :password %>
|
571
|
+
<%= f.form_group do %>
|
572
|
+
<%= f.check_box :remember_me %>
|
573
|
+
<% end %>
|
574
|
+
<%= f.form_group do %>
|
575
|
+
<%= f.submit %>
|
576
|
+
<% end %>
|
577
|
+
<% end %>
|
578
|
+
```
|
579
|
+
|
580
|
+
The `label_col` and `control_col` css classes can also be changed per control:
|
581
|
+
|
582
|
+
```erb
|
583
|
+
<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
|
584
|
+
<%= f.email_field :email %>
|
585
|
+
<%= f.text_field :age, control_col: "col-sm-3" %>
|
586
|
+
<%= f.form_group do %>
|
587
|
+
<%= f.submit %>
|
588
|
+
<% end %>
|
589
|
+
<% end %>
|
590
|
+
```
|
591
|
+
|
592
|
+
or default value can be changed in initializer:
|
593
|
+
|
594
|
+
```erb
|
595
|
+
# config/initializers/bootstrap_form.rb
|
596
|
+
module BootstrapForm
|
597
|
+
class FormBuilder
|
598
|
+
def default_label_col
|
599
|
+
'col-sm-4'
|
600
|
+
end
|
601
|
+
def default_control_col
|
602
|
+
'col-sm-8'
|
603
|
+
end
|
604
|
+
end
|
605
|
+
end
|
606
|
+
```
|
607
|
+
|
608
|
+
Control col wrapper class can be modified with `add_control_col_class`. This option will preserve column definition:
|
609
|
+
|
610
|
+
```erb
|
611
|
+
<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
|
612
|
+
<%= f.email_field :email %>
|
613
|
+
<%= f.text_field :age, add_control_col_class: "additional-control-col-class" %>
|
614
|
+
<%= f.form_group do %>
|
615
|
+
<%= f.submit %>
|
616
|
+
<% end %>
|
617
|
+
<% end %>
|
618
|
+
```
|
619
|
+
|
620
|
+
### Custom Field Layout
|
621
|
+
|
622
|
+
The form-level `layout` can be overridden per field, unless the form-level layout was `inline`:
|
623
|
+
|
624
|
+
```erb
|
625
|
+
<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
|
626
|
+
<%= f.email_field :email %>
|
627
|
+
<%= f.text_field :feet, layout: :default %>
|
628
|
+
<%= f.text_field :inches, layout: :default %>
|
629
|
+
<%= f.form_group do %>
|
630
|
+
<%= f.submit %>
|
631
|
+
<% end %>
|
632
|
+
<% end %>
|
633
|
+
```
|
634
|
+
|
635
|
+
A form-level `layout: :inline` can't be overridden because of the way Bootstrap 4 implements in-line layouts. One possible work-around is to leave the form-level layout as default, and specify the individual fields as `layout: :inline`, except for the fields(s) that should be other than in-line.
|
636
|
+
|
637
|
+
### Custom Form Element Styles
|
638
|
+
|
639
|
+
The `custom` option can be used to replace the browser default styles for check boxes and radio buttons with dedicated Bootstrap styled form elements. Here's an example:
|
640
|
+
|
641
|
+
```erb
|
642
|
+
<%= bootstrap_form_for(@user) do |f| %>
|
643
|
+
<%= f.email_field :email %>
|
644
|
+
<%= f.password_field :password %>
|
645
|
+
<%= f.check_box :remember_me, custom: true %>
|
646
|
+
<%= f.submit "Log In" %>
|
647
|
+
<% end %>
|
648
|
+
```
|
649
|
+
|
650
|
+
## Validation and Errors
|
651
|
+
|
652
|
+
### Inline Errors
|
653
|
+
|
654
|
+
By default, fields that have validation errors will be outlined in red and the
|
655
|
+
error will be displayed below the field. Rails normally wraps the fields in a
|
656
|
+
div (field_with_errors), but this behavior is suppressed. Here's an example:
|
657
|
+
|
658
|
+
```html
|
659
|
+
<div class="form-group">
|
660
|
+
<label class="form-control-label" for="user_email">Email</label>
|
661
|
+
<input class="form-control is-invalid" id="user_email" name="user[email]" type="email" value="">
|
662
|
+
<small class="invalid-feedback">can't be blank</small>
|
663
|
+
</div>
|
664
|
+
```
|
665
|
+
|
666
|
+
You can turn off inline errors for the entire form like this:
|
667
|
+
|
668
|
+
```erb
|
669
|
+
<%= bootstrap_form_for(@user, inline_errors: false) do |f| %>
|
670
|
+
...
|
671
|
+
<% end %>
|
672
|
+
```
|
673
|
+
|
674
|
+
### Label Errors
|
675
|
+
|
676
|
+
You can also display validation errors in the field's label; just turn
|
677
|
+
on the `:label_errors` option. Here's an example:
|
678
|
+
|
679
|
+
```
|
680
|
+
<%= bootstrap_form_for(@user, label_errors: true) do |f| %>
|
681
|
+
...
|
682
|
+
<% end %>
|
683
|
+
```
|
684
|
+
|
685
|
+
By default, turning on `:label_errors` will also turn off
|
686
|
+
`:inline_errors`. If you want both turned on, you can do that too:
|
687
|
+
|
688
|
+
```
|
689
|
+
<%= bootstrap_form_for(@user, label_errors: true, inline_errors: true) do |f| %>
|
690
|
+
...
|
691
|
+
<% end %>
|
692
|
+
```
|
693
|
+
|
694
|
+
### Alert Messages
|
695
|
+
|
696
|
+
To display an error message with an error summary, you can use the
|
697
|
+
`alert_message` helper. This won't output anything unless a model validation
|
698
|
+
has failed.
|
699
|
+
|
700
|
+
```erb
|
701
|
+
<%= f.alert_message "Please fix the errors below." %>
|
702
|
+
```
|
703
|
+
|
704
|
+
Which outputs:
|
705
|
+
|
706
|
+
```html
|
707
|
+
<div class="alert alert-danger">
|
708
|
+
<p>Please fix the errors below.</p>
|
709
|
+
<ul class="rails-bootstrap-forms-error-summary">
|
710
|
+
<li>Email can't be blank</li>
|
711
|
+
</ul>
|
712
|
+
</div>
|
713
|
+
```
|
714
|
+
|
715
|
+
You can turn off the error summary like this:
|
716
|
+
|
717
|
+
```erb
|
718
|
+
<%= f.alert_message "Please fix the errors below.", error_summary: false %>
|
719
|
+
```
|
720
|
+
|
721
|
+
To output a simple unordered list of errors, use the `error_summary` helper.
|
722
|
+
|
723
|
+
```erb
|
724
|
+
<%= f.error_summary %>
|
725
|
+
```
|
726
|
+
|
727
|
+
Which outputs:
|
728
|
+
|
729
|
+
```html
|
730
|
+
<ul class="rails-bootstrap-forms-error-summary">
|
731
|
+
<li>Email can't be blank</li>
|
732
|
+
</ul>
|
733
|
+
```
|
734
|
+
|
735
|
+
### Errors On
|
736
|
+
|
737
|
+
If you want to display a custom inline error for a specific attribute not
|
738
|
+
represented by a form field, use the `errors_on` helper.
|
739
|
+
|
740
|
+
```erb
|
741
|
+
<%= f.errors_on :tasks %>
|
742
|
+
```
|
743
|
+
|
744
|
+
Which outputs:
|
745
|
+
|
746
|
+
```html
|
747
|
+
<div class="alert alert-danger">Tasks can't be blank.</div>
|
748
|
+
```
|
749
|
+
|
750
|
+
You can hide the attribute name like this:
|
751
|
+
|
752
|
+
```erb
|
753
|
+
<%= f.errors_on :tasks, hide_attribute_name: true %>
|
754
|
+
```
|
755
|
+
|
756
|
+
Which outputs:
|
757
|
+
|
758
|
+
```html
|
759
|
+
<div class="alert alert-danger">can't be blank.</div>
|
760
|
+
```
|
761
|
+
|
762
|
+
## Internationalization
|
763
|
+
|
764
|
+
bootstrap_form follows standard rails conventions so it's i18n-ready. See more
|
765
|
+
here: http://guides.rubyonrails.org/i18n.html#translations-for-active-record-models
|
766
|
+
|
767
|
+
## Other Tips and Edge Cases
|
768
|
+
By their very nature, forms are extremely diverse. It would be extremely difficult to provide a gem that could handle every need. Here are some tips for handling edge cases.
|
769
|
+
|
770
|
+
### Empty But Visible Labels
|
771
|
+
Some third party plug-ins require an empty but visible label on an input control. The `hide_label` option generates a label that won't appear on the screen, but it's considered invisible and therefore doesn't work with such a plug-in. An empty label (e.g. `""`) causes the underlying Rails helper to generate a label based on the field's attribute's name.
|
772
|
+
|
773
|
+
The solution is to use a zero-width character for the label, or some other "empty" HTML. For example:
|
774
|
+
```
|
775
|
+
label: "​".html_safe
|
776
|
+
```
|
777
|
+
or
|
778
|
+
```
|
779
|
+
label: "<span></span>".html_safe
|
780
|
+
```
|
781
|
+
|
782
|
+
## Code Triage page
|
783
|
+
|
784
|
+
http://www.codetriage.com/potenza/bootstrap_form
|
785
|
+
|
786
|
+
## Contributing
|
787
|
+
|
788
|
+
We welcome contributions.
|
789
|
+
If you're considering contributing to bootstrap_form,
|
790
|
+
please review the [Contributing](/CONTRIBUTING.md)
|
791
|
+
document first.
|
792
|
+
|
793
|
+
## License
|
794
|
+
|
795
|
+
MIT License. Copyright 2012-2018 Stephen Potenza (https://github.com/potenza)
|