comfy_bootstrap_form 4.0.0.beta1
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
[![Build Status](https://travis-ci.org/comfy/comfy-bootstrap-form.svg?branch=master)](https://travis-ci.org/comfy/comfy-bootstrap-form)
|
2
|
+
[![Gem Version](https://badge.fury.io/rb/comfy_bootstrap_form.svg)](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)
|