comfy_bootstrap_form 4.0.0.beta1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +621 -0
- data/Rakefile +37 -0
- data/app/assets/stylesheets/rails_bootstrap_forms.css +10 -0
- data/lib/bootstrap_form.rb +13 -0
- data/lib/bootstrap_form/aliasing.rb +35 -0
- data/lib/bootstrap_form/form_builder.rb +460 -0
- data/lib/bootstrap_form/helper.rb +36 -0
- data/lib/bootstrap_form/helpers/bootstrap.rb +94 -0
- data/lib/bootstrap_form/helpers/nested_form.rb +33 -0
- data/lib/bootstrap_form/version.rb +3 -0
- data/lib/comfy_bootstrap_form.rb +1 -0
- data/test/bootstrap_checkbox_test.rb +144 -0
- data/test/bootstrap_fields_test.rb +152 -0
- data/test/bootstrap_form_group_test.rb +313 -0
- data/test/bootstrap_form_test.rb +276 -0
- data/test/bootstrap_other_components_test.rb +86 -0
- data/test/bootstrap_radio_button_test.rb +124 -0
- data/test/bootstrap_selects_test.rb +160 -0
- data/test/dummy/Gemfile +45 -0
- data/test/dummy/Gemfile.lock +120 -0
- data/test/dummy/README.rdoc +28 -0
- data/test/dummy/Rakefile +10 -0
- data/test/dummy/app/assets/javascripts/application.js +16 -0
- data/test/dummy/app/assets/stylesheets/application.css +13 -0
- data/test/dummy/app/controllers/application_controller.rb +5 -0
- data/test/dummy/app/helpers/application_helper.rb +2 -0
- data/test/dummy/app/models/address.rb +3 -0
- data/test/dummy/app/models/faux_user.rb +9 -0
- data/test/dummy/app/models/super_user.rb +2 -0
- data/test/dummy/app/models/user.rb +9 -0
- data/test/dummy/app/views/layouts/application.html.erb +14 -0
- data/test/dummy/bin/bundle +3 -0
- data/test/dummy/bin/rails +4 -0
- data/test/dummy/bin/rake +4 -0
- data/test/dummy/config.ru +4 -0
- data/test/dummy/config/application.rb +23 -0
- data/test/dummy/config/boot.rb +4 -0
- data/test/dummy/config/database.yml +25 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +29 -0
- data/test/dummy/config/environments/production.rb +80 -0
- data/test/dummy/config/environments/test.rb +53 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/filter_parameter_logging.rb +4 -0
- data/test/dummy/config/initializers/generic_migration.rb +6 -0
- data/test/dummy/config/initializers/inflections.rb +16 -0
- data/test/dummy/config/initializers/mime_types.rb +5 -0
- data/test/dummy/config/initializers/secret_token.rb +12 -0
- data/test/dummy/config/initializers/session_store.rb +3 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/test/dummy/config/locales/en.yml +23 -0
- data/test/dummy/config/routes.rb +3 -0
- data/test/dummy/db/migrate/20130703191909_create_users.rb +13 -0
- data/test/dummy/db/migrate/20130703191937_create_addresses.rb +13 -0
- data/test/dummy/db/migrate/20130912171202_add_preferences_to_user.rb +5 -0
- data/test/dummy/db/migrate/20140327190145_add_terms_to_user.rb +5 -0
- data/test/dummy/db/migrate/20140922133133_add_type_to_users.rb +5 -0
- data/test/dummy/db/schema.rb +38 -0
- data/test/dummy/db/seeds.rb +7 -0
- data/test/dummy/db/test.sqlite3 +0 -0
- data/test/dummy/log/test.log +18394 -0
- data/test/dummy/public/404.html +58 -0
- data/test/dummy/public/422.html +58 -0
- data/test/dummy/public/500.html +57 -0
- data/test/dummy/public/favicon.ico +0 -0
- data/test/dummy/public/robots.txt +5 -0
- data/test/dummy/test/fixtures/addresses.yml +15 -0
- data/test/dummy/test/fixtures/users.yml +15 -0
- data/test/dummy/test/models/address_test.rb +7 -0
- data/test/dummy/test/models/user_test.rb +7 -0
- data/test/dummy/test/test_helper.rb +15 -0
- data/test/special_form_class_models_test.rb +43 -0
- data/test/test_helper.rb +86 -0
- metadata +309 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: a09e9d913da0ef2be8595d43d33aec6e368bdbed
|
4
|
+
data.tar.gz: 81fc1495505df95e49938884d6160556f2acdc01
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 24d38af509aba51aa3d21b18320f56cf181d3a17f684031cafcefecb45e31585eaa474763876ac56447147592221ae2a6670d4de79c5cb92019ccf53dba7953b
|
7
|
+
data.tar.gz: 938caf3f08d42199219f4279280c4f99365681d9d680b0505248148f165326a610eaf657b710b9a277c6816dcaec870e538c87a2664a1f722a75bdfa39cfa9ea
|
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2012-2014 Stephen Potenza <potenza@gmail.com>
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,621 @@
|
|
1
|
+
[](https://travis-ci.org/comfy/comfy-bootstrap-form)
|
2
|
+
[](http://badge.fury.io/rb/comfy_bootstrap_form)
|
3
|
+
|
4
|
+
# Rails Bootstrap Forms
|
5
|
+
|
6
|
+
**Rails Bootstrap Forms** is a rails form builder that makes it super easy to integrate
|
7
|
+
twitter bootstrap-style forms into your rails application.
|
8
|
+
|
9
|
+
## Requirements
|
10
|
+
|
11
|
+
* Ruby 1.9+
|
12
|
+
* Rails 4.0+
|
13
|
+
* Twitter Bootstrap 4.0+
|
14
|
+
|
15
|
+
## Installation
|
16
|
+
|
17
|
+
Add it to your Gemfile:
|
18
|
+
|
19
|
+
`gem 'comfy_bootstrap_form'`
|
20
|
+
|
21
|
+
Then:
|
22
|
+
|
23
|
+
`bundle`
|
24
|
+
|
25
|
+
Then require the CSS in your `application.css` file:
|
26
|
+
|
27
|
+
```css
|
28
|
+
/*
|
29
|
+
*= require rails_bootstrap_forms
|
30
|
+
*/
|
31
|
+
```
|
32
|
+
|
33
|
+
## Usage
|
34
|
+
|
35
|
+
To get started, just use the `bootstrap_form_for` helper. Here's an example:
|
36
|
+
|
37
|
+
```erb
|
38
|
+
<%= bootstrap_form_for(@user) do |f| %>
|
39
|
+
<%= f.email_field :email %>
|
40
|
+
<%= f.password_field :password %>
|
41
|
+
<%= f.check_box :remember_me %>
|
42
|
+
<%= f.submit "Log In" %>
|
43
|
+
<% end %>
|
44
|
+
```
|
45
|
+
|
46
|
+
This generates the following HTML:
|
47
|
+
|
48
|
+
```html
|
49
|
+
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
|
50
|
+
<div class="form-group">
|
51
|
+
<label for="user_email">Email</label>
|
52
|
+
<input class="form-control" id="user_email" name="user[email]" type="email">
|
53
|
+
</div>
|
54
|
+
<div class="form-group">
|
55
|
+
<label for="user_password">Password</label>
|
56
|
+
<input class="form-control" id="user_password" name="user[password]" type="password">
|
57
|
+
</div>
|
58
|
+
<div class="form-check">
|
59
|
+
<label for="user_remember_me">
|
60
|
+
<input name="user[remember_me]" type="hidden" value="0">
|
61
|
+
<input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> Remember me
|
62
|
+
</label>
|
63
|
+
</div>
|
64
|
+
<input class="btn btn-secondary" name="commit" type="submit" value="Log In">
|
65
|
+
</form>
|
66
|
+
```
|
67
|
+
|
68
|
+
### Nested Forms
|
69
|
+
|
70
|
+
In order to active [nested_form](https://github.com/ryanb/nested_form) support,
|
71
|
+
use `bootstrap_nested_form_for` instead of `bootstrap_form_for`.
|
72
|
+
|
73
|
+
### bootstrap_form_tag
|
74
|
+
|
75
|
+
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:
|
76
|
+
|
77
|
+
```erb
|
78
|
+
<%= bootstrap_form_tag url: '/subscribe' do |f| %>
|
79
|
+
<%= f.email_field :email, value: 'name@example.com' %>
|
80
|
+
<%= f.submit %>
|
81
|
+
<% end %>
|
82
|
+
```
|
83
|
+
|
84
|
+
## Form Helpers
|
85
|
+
|
86
|
+
This gem wraps the following Rails form helpers:
|
87
|
+
|
88
|
+
* check_box
|
89
|
+
* collection_check_boxes
|
90
|
+
* collection_select
|
91
|
+
* color_field
|
92
|
+
* date_field
|
93
|
+
* date_select
|
94
|
+
* datetime_field
|
95
|
+
* datetime_local_field
|
96
|
+
* datetime_select
|
97
|
+
* email_field
|
98
|
+
* file_field
|
99
|
+
* grouped_collection_select
|
100
|
+
* hidden_field (not wrapped, but supported)
|
101
|
+
* month_field
|
102
|
+
* number_field
|
103
|
+
* password_field
|
104
|
+
* phone_field
|
105
|
+
* radio_button
|
106
|
+
* collection_radio_buttons
|
107
|
+
* range_field
|
108
|
+
* search_field
|
109
|
+
* select
|
110
|
+
* telephone_field
|
111
|
+
* text_area
|
112
|
+
* text_field
|
113
|
+
* time_field
|
114
|
+
* time_select
|
115
|
+
* time_zone_select
|
116
|
+
* url_field
|
117
|
+
* week_field
|
118
|
+
|
119
|
+
These helpers accept the same options as the standard Rails form helpers, with
|
120
|
+
a few extra options:
|
121
|
+
|
122
|
+
### Labels
|
123
|
+
|
124
|
+
Use the `label` option if you want to specify the field's label text:
|
125
|
+
|
126
|
+
```erb
|
127
|
+
<%= f.password_field :password_confirmation, label: "Confirm Password" %>
|
128
|
+
```
|
129
|
+
|
130
|
+
To hide a label, use the `hide_label: true` option. This adds the `sr-only`
|
131
|
+
class, which keeps your labels accessible to those using screen readers.
|
132
|
+
|
133
|
+
```erb
|
134
|
+
<%= f.text_area :comment, hide_label: true, placeholder: "Leave a comment..." %>
|
135
|
+
```
|
136
|
+
|
137
|
+
To add custom classes to the field's label:
|
138
|
+
|
139
|
+
```erb
|
140
|
+
<%= f.text_field :email, label_class: "custom-class" %>
|
141
|
+
```
|
142
|
+
|
143
|
+
#### Required Fields
|
144
|
+
|
145
|
+
A label that is associated with a required field is automatically annotated with
|
146
|
+
a `required` CSS class. You are free to add any appropriate CSS to style
|
147
|
+
required fields as desired. One example would be to automatically add an
|
148
|
+
asterisk to the end of the label:
|
149
|
+
|
150
|
+
```css
|
151
|
+
label.required:after {
|
152
|
+
content:" *";
|
153
|
+
}
|
154
|
+
```
|
155
|
+
|
156
|
+
The label `required` class is determined based on the definition of a presence
|
157
|
+
validator with the associated model attribute. Presently this is one of:
|
158
|
+
ActiveRecord::Validations::PresenceValidator or
|
159
|
+
ActiveModel::Validations::PresenceValidator.
|
160
|
+
|
161
|
+
In cases where this behavior is undesirable, use the `skip_required` option:
|
162
|
+
|
163
|
+
```erb
|
164
|
+
<%= f.password_field :password, label: "New Password", skip_required: true %>
|
165
|
+
```
|
166
|
+
|
167
|
+
### Input Elements / Controls
|
168
|
+
|
169
|
+
To specify the class of the generated input, use the `control_class` option:
|
170
|
+
|
171
|
+
```erb
|
172
|
+
<%= f.text_field :email, control_class: "custom-class" %>
|
173
|
+
```
|
174
|
+
|
175
|
+
### Help Text
|
176
|
+
|
177
|
+
To add help text, use the `help` option:
|
178
|
+
|
179
|
+
```erb
|
180
|
+
<%= f.password_field :password, help: "Must be at least 6 characters long" %>
|
181
|
+
```
|
182
|
+
|
183
|
+
This gem is also aware of help messages in locale translation files (i18n):
|
184
|
+
|
185
|
+
```yml
|
186
|
+
en:
|
187
|
+
activerecord:
|
188
|
+
help:
|
189
|
+
user:
|
190
|
+
password: "A good password should be at least six characters long"
|
191
|
+
```
|
192
|
+
|
193
|
+
If your model name has multiple words (like `SuperUser`), the key on the
|
194
|
+
translation file should be underscored (`super_user`).
|
195
|
+
|
196
|
+
You can override help translations for a particular field by passing the `help`
|
197
|
+
option or turn them off completely by passing `help: false`.
|
198
|
+
|
199
|
+
### Icons
|
200
|
+
|
201
|
+
To add an icon to a field, use the `icon` option and pass the icon name
|
202
|
+
*without* the 'glyphicon' prefix:
|
203
|
+
|
204
|
+
```erb
|
205
|
+
<%= f.text_field :login, icon: "user" %>
|
206
|
+
```
|
207
|
+
|
208
|
+
This automatically adds the `has-feedback` class to the `form-group`:
|
209
|
+
|
210
|
+
```html
|
211
|
+
<div class="form-group has-feedback">
|
212
|
+
<label class="form-control-label" for="user_login">Login</label>
|
213
|
+
<input class="form-control" id="user_login" name="user[login]" type="text" />
|
214
|
+
<span class="glyphicon glyphicon-user form-control-feedback"></span>
|
215
|
+
</div>
|
216
|
+
```
|
217
|
+
|
218
|
+
### Prepending and Appending Inputs
|
219
|
+
|
220
|
+
You can pass `prepend` and/or `append` options to input fields:
|
221
|
+
|
222
|
+
```erb
|
223
|
+
<%= f.text_field :price, prepend: "$", append: ".00" %>
|
224
|
+
```
|
225
|
+
|
226
|
+
You can also prepend and append buttons. Note: The buttons must contain the
|
227
|
+
`btn` class to generate the correct markup.
|
228
|
+
|
229
|
+
```erb
|
230
|
+
<%= f.text_field :search, append: link_to("Go", "#", class: "btn btn-secondary") %>
|
231
|
+
```
|
232
|
+
|
233
|
+
To add a class to the input group wrapper, use `:input_group_class` option.
|
234
|
+
|
235
|
+
```erb
|
236
|
+
<%= f.email_field :email, append: f.primary('Subscribe'), input_group_class: 'input-group-lg' %>
|
237
|
+
```
|
238
|
+
|
239
|
+
### Additional Form Group Attributes
|
240
|
+
|
241
|
+
If you want to add an additional css class or any other attribute to the form group div, you can use
|
242
|
+
the `wrapper: { class: 'additional-class', data: { foo: 'bar' } }` option.
|
243
|
+
|
244
|
+
```erb
|
245
|
+
<%= f.text_field :name, wrapper: { class: 'has-warning', data: { foo: 'bar' } } %>
|
246
|
+
```
|
247
|
+
|
248
|
+
Which produces the following output:
|
249
|
+
|
250
|
+
```erb
|
251
|
+
<div class="form-group has-warning" data-foo="bar">
|
252
|
+
<label class="form-control-label" for="user_name">Id</label>
|
253
|
+
<input class="form-control" id="user_name" name="user[name]" type="text">
|
254
|
+
</div>
|
255
|
+
```
|
256
|
+
|
257
|
+
You still can use `wrapper_class` option to set only a css class. This is just a short form of `wrapper: { class: 'additional-class' }`.
|
258
|
+
|
259
|
+
### Selects
|
260
|
+
|
261
|
+
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:
|
262
|
+
|
263
|
+
```erb
|
264
|
+
<%= f.select :product, [[1, "Apple"], [2, "Grape"]], { label: "Choose your favorite fruit:" }, { class: "selectpicker" } %>
|
265
|
+
```
|
266
|
+
|
267
|
+
### Checkboxes and Radios
|
268
|
+
|
269
|
+
Checkboxes and radios should be placed inside of a `form_group` to render
|
270
|
+
properly. The following example ensures that the entire form group will display
|
271
|
+
an error if an associated validations fails:
|
272
|
+
|
273
|
+
```erb
|
274
|
+
<%= f.form_group :skill_level, label: { text: "Skill" }, help: "Optional Help Text" do %>
|
275
|
+
<%= f.radio_button :skill_level, 0, label: "Novice", checked: true %>
|
276
|
+
<%= f.radio_button :skill_level, 1, label: "Intermediate" %>
|
277
|
+
<%= f.radio_button :skill_level, 2, label: "Advanced" %>
|
278
|
+
<% end %>
|
279
|
+
|
280
|
+
<%= f.form_group :terms do %>
|
281
|
+
<%= f.check_box :terms, label: "I agree to the Terms of Service" %>
|
282
|
+
<% end %>
|
283
|
+
```
|
284
|
+
|
285
|
+
You can also create a checkbox using a block:
|
286
|
+
|
287
|
+
```erb
|
288
|
+
<%= f.form_group :terms, label: { text: "Optional Label" } do %>
|
289
|
+
<%= f.check_box :terms do %>
|
290
|
+
You need to check this box to accept our terms of service and privacy policy
|
291
|
+
<% end %>
|
292
|
+
<% end %>
|
293
|
+
```
|
294
|
+
|
295
|
+
To display checkboxes and radios inline, pass the `inline: true` option:
|
296
|
+
|
297
|
+
```erb
|
298
|
+
<%= f.form_group :skill_level, label: { text: "Skill" } do %>
|
299
|
+
<%= f.radio_button :skill_level, 0, label: "Novice", inline: true %>
|
300
|
+
<%= f.radio_button :skill_level, 1, label: "Intermediate", inline: true %>
|
301
|
+
<%= f.radio_button :skill_level, 2, label: "Advanced", inline: true %>
|
302
|
+
<% end %>
|
303
|
+
```
|
304
|
+
|
305
|
+
#### Collections
|
306
|
+
|
307
|
+
BootstrapForms also provides helpers that automatically creates the
|
308
|
+
`form_group` and the `radio_button`s or `check_box`es for you:
|
309
|
+
|
310
|
+
```erb
|
311
|
+
<%= f.collection_radio_buttons :skill_level, Skill.all, :id, :name %>
|
312
|
+
<%= f.collection_check_boxes :skills, Skill.all, :id, :name %>
|
313
|
+
```
|
314
|
+
|
315
|
+
Collection methods accept these options:
|
316
|
+
* `:label`: Customize the `form_group`'s label
|
317
|
+
* `:hide_label`: Pass true to hide the `form_group`'s label
|
318
|
+
* `:help`: Add a help span to the `form_group`
|
319
|
+
* Other options will be forwarded to the `radio_button`/`check_box` method
|
320
|
+
|
321
|
+
### Static Controls
|
322
|
+
|
323
|
+
You can create a static control like this:
|
324
|
+
|
325
|
+
```erb
|
326
|
+
<%= f.static_control :email %>
|
327
|
+
```
|
328
|
+
|
329
|
+
Here's the output:
|
330
|
+
|
331
|
+
```html
|
332
|
+
<div class="form-group">
|
333
|
+
<label class="col-sm-2 form-control-label" for="user_email">Email</label>
|
334
|
+
<div class="col-sm-10">
|
335
|
+
<p class="form-control-static">test@email.com</p>
|
336
|
+
</div>
|
337
|
+
</div>
|
338
|
+
```
|
339
|
+
|
340
|
+
You can also create a static control that isn't based on a model attribute:
|
341
|
+
|
342
|
+
```erb
|
343
|
+
<%= f.static_control label: "Custom Static Control" do %>
|
344
|
+
Content Here
|
345
|
+
<% end %>
|
346
|
+
```
|
347
|
+
|
348
|
+
### Date Helpers
|
349
|
+
|
350
|
+
The multiple selects that the date and time helpers (`date_select`,
|
351
|
+
`time_select`, `datetime_select`) generate are wrapped inside a
|
352
|
+
`div.rails-bootstrap-forms-[date|time|datetime]-select` tag. This is because
|
353
|
+
Bootstrap automatically stylizes ours controls as `block`s. This wrapper fix
|
354
|
+
this defining these selects as `inline-block` and a width of `auto`.
|
355
|
+
|
356
|
+
### Submit Buttons
|
357
|
+
|
358
|
+
The `btn btn-secondary` css classes are automatically added to your submit
|
359
|
+
buttons.
|
360
|
+
|
361
|
+
```erb
|
362
|
+
<%= f.submit %>
|
363
|
+
```
|
364
|
+
|
365
|
+
You can also use the `primary` helper, which adds `btn btn-primary` to your
|
366
|
+
submit button:
|
367
|
+
|
368
|
+
```erb
|
369
|
+
<%= f.primary "Optional Label" %>
|
370
|
+
```
|
371
|
+
|
372
|
+
You can specify your own classes like this:
|
373
|
+
|
374
|
+
```erb
|
375
|
+
<%= f.submit "Log In", class: "btn btn-success" %>
|
376
|
+
```
|
377
|
+
|
378
|
+
### Accessing Rails Form Helpers
|
379
|
+
|
380
|
+
If you want to use the original Rails form helpers for a particular field,
|
381
|
+
append `_without_bootstrap` to the helper:
|
382
|
+
|
383
|
+
```erb
|
384
|
+
<%= f.text_field_without_bootstrap :email %>
|
385
|
+
```
|
386
|
+
|
387
|
+
## Form Styles
|
388
|
+
|
389
|
+
By default, your forms will stack labels on top of controls and your controls
|
390
|
+
will grow to 100% of the available width.
|
391
|
+
|
392
|
+
### Inline Forms
|
393
|
+
|
394
|
+
To use an inline-layout form, use the `layout: :inline` option. To hide labels,
|
395
|
+
use the `hide_label: true` option, which keeps your labels accessible to those
|
396
|
+
using screen readers.
|
397
|
+
|
398
|
+
```erb
|
399
|
+
<%= bootstrap_form_for(@user, layout: :inline) do |f| %>
|
400
|
+
<%= f.email_field :email, hide_label: true %>
|
401
|
+
<%= f.password_field :password, hide_label: true %>
|
402
|
+
<%= f.check_box :remember_me %>
|
403
|
+
<%= f.submit %>
|
404
|
+
<% end %>
|
405
|
+
```
|
406
|
+
|
407
|
+
To skip label rendering at all, use `skip_label: true` option.
|
408
|
+
|
409
|
+
```erb
|
410
|
+
<%= f.password_field :password, skip_label: true %>
|
411
|
+
```
|
412
|
+
|
413
|
+
### Horizontal Forms
|
414
|
+
|
415
|
+
To use a horizontal-layout form with labels to the left of the control, use the
|
416
|
+
`layout: :horizontal` option. You should specify both `label_col` and
|
417
|
+
`control_col` css classes as well (they default to `col-sm-2` and `col-sm-10`).
|
418
|
+
|
419
|
+
In the example below, the checkbox and submit button have been wrapped in a
|
420
|
+
`form_group` to keep them properly aligned.
|
421
|
+
|
422
|
+
```erb
|
423
|
+
<%= bootstrap_form_for(@user, layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-10") do |f| %>
|
424
|
+
<%= f.email_field :email %>
|
425
|
+
<%= f.password_field :password %>
|
426
|
+
<%= f.form_group do %>
|
427
|
+
<%= f.check_box :remember_me %>
|
428
|
+
<% end %>
|
429
|
+
<%= f.form_group do %>
|
430
|
+
<%= f.submit %>
|
431
|
+
<% end %>
|
432
|
+
<% end %>
|
433
|
+
```
|
434
|
+
|
435
|
+
The `label_col` and `control_col` css classes can also be changed per control:
|
436
|
+
|
437
|
+
```erb
|
438
|
+
<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
|
439
|
+
<%= f.email_field :email %>
|
440
|
+
<%= f.text_field :age, control_col: "col-sm-3" %>
|
441
|
+
<%= f.form_group do %>
|
442
|
+
<%= f.submit %>
|
443
|
+
<% end %>
|
444
|
+
<% end %>
|
445
|
+
```
|
446
|
+
|
447
|
+
### Custom Field Layout
|
448
|
+
|
449
|
+
The `layout` can be overridden per field:
|
450
|
+
|
451
|
+
```erb
|
452
|
+
<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
|
453
|
+
<%= f.email_field :email %>
|
454
|
+
<%= f.text_field :feet, layout: :default %>
|
455
|
+
<%= f.text_field :inches, layout: :default %>
|
456
|
+
<%= f.form_group do %>
|
457
|
+
<%= f.submit %>
|
458
|
+
<% end %>
|
459
|
+
<% end %>
|
460
|
+
```
|
461
|
+
|
462
|
+
## Validation & Errors
|
463
|
+
|
464
|
+
### Inline Errors
|
465
|
+
|
466
|
+
By default, fields that have validation errors will outlined in red and the
|
467
|
+
error will be displayed below the field. Rails normally wraps the fields in a
|
468
|
+
div (field_with_errors), but this behavior is suppressed. Here's an example:
|
469
|
+
|
470
|
+
```html
|
471
|
+
<div class="form-group has-danger">
|
472
|
+
<label class="form-control-label" for="user_email">Email</label>
|
473
|
+
<input class="form-control" id="user_email" name="user[email]" type="email" value="">
|
474
|
+
<span class="form-control-feedback">can't be blank</span>
|
475
|
+
</div>
|
476
|
+
```
|
477
|
+
|
478
|
+
You can turn off inline errors for the entire form like this:
|
479
|
+
|
480
|
+
```erb
|
481
|
+
<%= bootstrap_form_for(@user, inline_errors: false) do |f| %>
|
482
|
+
...
|
483
|
+
<% end %>
|
484
|
+
```
|
485
|
+
|
486
|
+
### Label Errors
|
487
|
+
|
488
|
+
You can also display validation errors in the field's label; just turn
|
489
|
+
on the `:label_errors` option. Here's an example:
|
490
|
+
|
491
|
+
```
|
492
|
+
<%= bootstrap_form_for(@user, label_errors: true) do |f| %>
|
493
|
+
...
|
494
|
+
<% end %>
|
495
|
+
```
|
496
|
+
|
497
|
+
By default, turning on `:label_errors` will also turn off
|
498
|
+
`:inline_errors`. If you want both turned on, you can do that too:
|
499
|
+
|
500
|
+
```
|
501
|
+
<%= bootstrap_form_for(@user, label_errors: true, inline_errors: true) do |f| %>
|
502
|
+
...
|
503
|
+
<% end %>
|
504
|
+
```
|
505
|
+
|
506
|
+
### Alert Messages
|
507
|
+
|
508
|
+
To display an error message with an error summary, you can use the
|
509
|
+
`alert_message` helper. This won't output anything unless a model validation
|
510
|
+
has failed.
|
511
|
+
|
512
|
+
```erb
|
513
|
+
<%= f.alert_message "Please fix the errors below." %>
|
514
|
+
```
|
515
|
+
|
516
|
+
Which outputs:
|
517
|
+
|
518
|
+
```html
|
519
|
+
<div class="alert alert-danger">
|
520
|
+
<p>Please fix the errors below.</p>
|
521
|
+
<ul class="rails-bootstrap-forms-error-summary">
|
522
|
+
<li>Email can't be blank</li>
|
523
|
+
</ul>
|
524
|
+
</div>
|
525
|
+
```
|
526
|
+
|
527
|
+
You can turn off the error summary like this:
|
528
|
+
|
529
|
+
```erb
|
530
|
+
<%= f.alert_message "Please fix the errors below.", error_summary: false %>
|
531
|
+
```
|
532
|
+
|
533
|
+
To output a simple unordered list of errors, use the `error_summary` helper.
|
534
|
+
|
535
|
+
```erb
|
536
|
+
<%= f.error_summary %>
|
537
|
+
```
|
538
|
+
|
539
|
+
Which outputs:
|
540
|
+
|
541
|
+
```html
|
542
|
+
<ul class="rails-bootstrap-forms-error-summary">
|
543
|
+
<li>Email can't be blank</li>
|
544
|
+
</ul>
|
545
|
+
```
|
546
|
+
|
547
|
+
### Errors On
|
548
|
+
|
549
|
+
If you want to display a custom inline error for a specific attribute not
|
550
|
+
represented by a form field, use the `errors_on` helper.
|
551
|
+
|
552
|
+
```erb
|
553
|
+
<%= f.errors_on :tasks %>
|
554
|
+
```
|
555
|
+
|
556
|
+
Which outputs:
|
557
|
+
|
558
|
+
```html
|
559
|
+
<div class="alert alert-danger">Tasks can't be blank.</div>
|
560
|
+
```
|
561
|
+
|
562
|
+
You can hide the attribute name like this:
|
563
|
+
|
564
|
+
```erb
|
565
|
+
<%= f.errors_on :tasks, hide_attribute_name: true %>
|
566
|
+
```
|
567
|
+
|
568
|
+
Which outputs:
|
569
|
+
|
570
|
+
```html
|
571
|
+
<div class="alert alert-danger">can't be blank.</div>
|
572
|
+
```
|
573
|
+
|
574
|
+
## Internationalization
|
575
|
+
|
576
|
+
bootstrap_form follows standard rails conventions so it's i18n-ready. See more
|
577
|
+
here: http://guides.rubyonrails.org/i18n.html#translations-for-active-record-models
|
578
|
+
|
579
|
+
## Code Triage page
|
580
|
+
|
581
|
+
http://www.codetriage.com/potenza/bootstrap_form
|
582
|
+
|
583
|
+
## Contributing
|
584
|
+
|
585
|
+
We love pull requests! Here's a quick guide for contributing:
|
586
|
+
|
587
|
+
1. Fork the repo.
|
588
|
+
|
589
|
+
2. Install the required dependencies.
|
590
|
+
|
591
|
+
```
|
592
|
+
bundle install
|
593
|
+
bundle exec appraisal install
|
594
|
+
```
|
595
|
+
|
596
|
+
3. Run the existing test suite:
|
597
|
+
|
598
|
+
```
|
599
|
+
$ bundle exec rake -f test/dummy/Rakefile db:create db:migrate RAILS_ENV=test
|
600
|
+
$ bundle exec appraisal rake test
|
601
|
+
```
|
602
|
+
|
603
|
+
4. Add tests for your change.
|
604
|
+
|
605
|
+
5. Add your changes and make your test(s) pass. Following the conventions you
|
606
|
+
see used in the source will increase the chance that your pull request is
|
607
|
+
accepted right away.
|
608
|
+
|
609
|
+
6. Update the README if necessary.
|
610
|
+
|
611
|
+
7. Add a line to the CHANGELOG for your bug fix or feature.
|
612
|
+
|
613
|
+
8. Push to your fork and submit a pull request.
|
614
|
+
|
615
|
+
## Contributors
|
616
|
+
|
617
|
+
https://github.com/bootstrap-ruby/rails-bootstrap-forms/graphs/contributors
|
618
|
+
|
619
|
+
## License
|
620
|
+
|
621
|
+
MIT License. Copyright 2012-2014 Stephen Potenza (https://github.com/potenza)
|