simple_form 2.1.0 → 3.0.0
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.
Potentially problematic release.
This version of simple_form might be problematic. Click here for more details.
- checksums.yaml +7 -0
- data/CHANGELOG.md +22 -32
- data/README.md +161 -119
- data/lib/generators/simple_form/install_generator.rb +3 -3
- data/lib/generators/simple_form/templates/README +1 -1
- data/lib/generators/simple_form/templates/config/initializers/simple_form.rb +16 -13
- data/lib/generators/simple_form/templates/config/initializers/simple_form_bootstrap.rb +14 -14
- data/lib/generators/simple_form/templates/config/initializers/simple_form_foundation.rb +3 -3
- data/lib/simple_form/action_view_extensions/builder.rb +1 -319
- data/lib/simple_form/action_view_extensions/form_helper.rb +2 -9
- data/lib/simple_form/components/html5.rb +5 -2
- data/lib/simple_form/components/labels.rb +3 -3
- data/lib/simple_form/components/maxlength.rb +1 -8
- data/lib/simple_form/components/pattern.rb +2 -2
- data/lib/simple_form/components.rb +1 -1
- data/lib/simple_form/error_notification.rb +2 -2
- data/lib/simple_form/form_builder.rb +155 -51
- data/lib/simple_form/helpers.rb +1 -1
- data/lib/simple_form/inputs/base.rb +6 -6
- data/lib/simple_form/inputs/block_input.rb +1 -1
- data/lib/simple_form/inputs/boolean_input.rb +6 -4
- data/lib/simple_form/inputs/collection_input.rb +6 -6
- data/lib/simple_form/inputs/date_time_input.rb +1 -1
- data/lib/simple_form/inputs/numeric_input.rb +0 -6
- data/lib/simple_form/inputs/password_input.rb +0 -1
- data/lib/simple_form/inputs/string_input.rb +0 -1
- data/lib/simple_form/railtie.rb +7 -0
- data/lib/simple_form/tags.rb +62 -0
- data/lib/simple_form/version.rb +1 -1
- data/lib/simple_form/wrappers/builder.rb +5 -29
- data/lib/simple_form/wrappers/many.rb +1 -1
- data/lib/simple_form/wrappers/root.rb +1 -1
- data/lib/simple_form/wrappers.rb +1 -1
- data/lib/simple_form.rb +43 -47
- data/test/action_view_extensions/builder_test.rb +78 -92
- data/test/action_view_extensions/form_helper_test.rb +25 -16
- data/test/components/label_test.rb +46 -46
- data/test/form_builder/association_test.rb +47 -29
- data/test/form_builder/button_test.rb +4 -4
- data/test/form_builder/error_notification_test.rb +8 -8
- data/test/form_builder/error_test.rb +12 -12
- data/test/form_builder/general_test.rb +71 -52
- data/test/form_builder/hint_test.rb +22 -22
- data/test/form_builder/input_field_test.rb +29 -12
- data/test/form_builder/label_test.rb +7 -7
- data/test/form_builder/wrapper_test.rb +21 -21
- data/test/inputs/boolean_input_test.rb +35 -23
- data/test/inputs/collection_check_boxes_input_test.rb +66 -55
- data/test/inputs/collection_radio_buttons_input_test.rb +81 -79
- data/test/inputs/collection_select_input_test.rb +76 -45
- data/test/inputs/datetime_input_test.rb +17 -11
- data/test/inputs/disabled_test.rb +10 -10
- data/test/inputs/discovery_test.rb +4 -4
- data/test/inputs/file_input_test.rb +1 -1
- data/test/inputs/general_test.rb +28 -12
- data/test/inputs/grouped_collection_select_input_test.rb +33 -20
- data/test/inputs/hidden_input_test.rb +3 -2
- data/test/inputs/numeric_input_test.rb +3 -3
- data/test/inputs/priority_input_test.rb +9 -3
- data/test/inputs/readonly_test.rb +12 -12
- data/test/inputs/required_test.rb +5 -5
- data/test/inputs/string_input_test.rb +15 -25
- data/test/inputs/text_input_test.rb +1 -1
- data/test/support/misc_helpers.rb +46 -24
- data/test/support/mock_controller.rb +6 -6
- data/test/support/models.rb +80 -62
- data/test/test_helper.rb +17 -34
- metadata +31 -29
- data/lib/simple_form/core_ext/hash.rb +0 -16
data/README.md
CHANGED
@@ -1,12 +1,20 @@
|
|
1
|
-
|
2
|
-
[](http://travis-ci.org/plataformatec/simple_form)
|
1
|
+

|
3
2
|
|
4
|
-
|
5
|
-
|
3
|
+
By [Plataformatec](http://plataformatec.com.br/).
|
4
|
+
|
5
|
+
[](http://badge.fury.io/rb/simple_form)
|
6
|
+
[](http://travis-ci.org/plataformatec/simple_form)
|
7
|
+
[](https://codeclimate.com/github/plataformatec/simple_form)
|
8
|
+
|
9
|
+
Rails forms made easy.
|
10
|
+
|
11
|
+
**Simple Form** aims to be as flexible as possible while helping you with powerful components to create
|
12
|
+
your forms. The basic goal of **Simple Form** is to not touch your way of defining the layout, letting
|
6
13
|
you find the better design for your eyes. Most of the DSL was inherited from Formtastic,
|
7
14
|
which we are thankful for and should make you feel right at home.
|
8
15
|
|
9
|
-
INFO: This README
|
16
|
+
INFO: This README is [also available in a friendly navigable format](http://simple-form.plataformatec.com.br/)
|
17
|
+
and refers to **Simple Form** 3.0. For older releases, check the related branch for your version.
|
10
18
|
|
11
19
|
## Installation
|
12
20
|
|
@@ -37,7 +45,7 @@ gem 'country_select'
|
|
37
45
|
|
38
46
|
### Twitter Bootstrap
|
39
47
|
|
40
|
-
**
|
48
|
+
**Simple Form** can be easily integrated to the [Twitter Bootstrap](http://twitter.github.com/bootstrap).
|
41
49
|
To do that you have to use the `bootstrap` option in the install generator, like this:
|
42
50
|
|
43
51
|
```console
|
@@ -51,29 +59,32 @@ For more information see the generator output, our
|
|
51
59
|
[example application code](https://github.com/rafaelfranca/simple_form-bootstrap) and
|
52
60
|
[the live example app](http://simple-form-bootstrap.plataformatec.com.br/).
|
53
61
|
|
54
|
-
**NOTE**: **
|
62
|
+
**NOTE**: **Simple Form** integration requires Twitter Bootstrap version 2.0 or higher.
|
55
63
|
|
56
64
|
### Zurb Foundation 3
|
57
65
|
|
58
|
-
To generate wrappers that are compatible with [Zurb Foundation 3](http://foundation.zurb.com/), pass
|
66
|
+
To generate wrappers that are compatible with [Zurb Foundation 3](http://foundation.zurb.com/), pass
|
67
|
+
the `foundation` option to the generator, like this:
|
59
68
|
|
60
69
|
```console
|
61
70
|
rails generate simple_form:install --foundation
|
62
71
|
```
|
63
72
|
|
64
|
-
Please note that the Foundation wrapper does not support the `:hint` option by default. In order to
|
73
|
+
Please note that the Foundation wrapper does not support the `:hint` option by default. In order to
|
74
|
+
enable hints, please uncomment the appropriate line in `config/initializers/simple_form_foundation.rb`.
|
75
|
+
You will need to provide your own CSS styles for hints.
|
65
76
|
|
66
|
-
Please see the [instructions on how to install Foundation in a Rails app](http://foundation.zurb.com/docs/rails.php).
|
77
|
+
Please see the [instructions on how to install Foundation in a Rails app](http://foundation.zurb.com/old-docs/f3/rails.php).
|
67
78
|
|
68
79
|
## Usage
|
69
80
|
|
70
|
-
**
|
81
|
+
**Simple Form** was designed to be customized as you need to. Basically it's a stack of components that
|
71
82
|
are invoked to create a complete html input for you, which by default contains label, hints, errors
|
72
83
|
and the input itself. It does not aim to create a lot of different logic from the default Rails
|
73
|
-
form helpers, as they do a great work by themselves. Instead, **
|
84
|
+
form helpers, as they do a great work by themselves. Instead, **Simple Form** acts as a DSL and just
|
74
85
|
maps your input type (retrieved from the column definition in the database) to a specific helper method.
|
75
86
|
|
76
|
-
To start using **
|
87
|
+
To start using **Simple Form** you just have to use the helper it provides:
|
77
88
|
|
78
89
|
```erb
|
79
90
|
<%= simple_form_for @user do |f| %>
|
@@ -91,10 +102,10 @@ even a placeholder. For boolean inputs, you can add an inline label as well:
|
|
91
102
|
|
92
103
|
```erb
|
93
104
|
<%= simple_form_for @user do |f| %>
|
94
|
-
<%= f.input :username, :
|
95
|
-
<%= f.input :password, :
|
96
|
-
<%= f.input :email, :
|
97
|
-
<%= f.input :remember_me, :
|
105
|
+
<%= f.input :username, label: 'Your username please' %>
|
106
|
+
<%= f.input :password, hint: 'No special characters.' %>
|
107
|
+
<%= f.input :email, placeholder: 'user@domain.com' %>
|
108
|
+
<%= f.input :remember_me, inline_label: 'Yes, remember me' %>
|
98
109
|
<%= f.button :submit %>
|
99
110
|
<% end %>
|
100
111
|
```
|
@@ -104,9 +115,9 @@ of any of them:
|
|
104
115
|
|
105
116
|
```erb
|
106
117
|
<%= simple_form_for @user do |f| %>
|
107
|
-
<%= f.input :username, :
|
108
|
-
<%= f.input :password, :
|
109
|
-
<%= f.input :password_confirmation, :
|
118
|
+
<%= f.input :username, label_html: { class: 'my_class' } %>
|
119
|
+
<%= f.input :password, hint: false, error_html: { id: 'password_error'} %>
|
120
|
+
<%= f.input :password_confirmation, label: false %>
|
110
121
|
<%= f.button :submit %>
|
111
122
|
<% end %>
|
112
123
|
```
|
@@ -116,9 +127,9 @@ option, for instance:
|
|
116
127
|
|
117
128
|
```erb
|
118
129
|
<%= simple_form_for @user do |f| %>
|
119
|
-
<%= f.input :username, :
|
120
|
-
<%= f.input :password, :
|
121
|
-
<%= f.input :remember_me, :
|
130
|
+
<%= f.input :username, input_html: { class: 'special' } %>
|
131
|
+
<%= f.input :password, input_html: { maxlength: 20 } %>
|
132
|
+
<%= f.input :remember_me, input_html: { value: '1' } %>
|
122
133
|
<%= f.button :submit %>
|
123
134
|
<% end %>
|
124
135
|
```
|
@@ -128,80 +139,82 @@ you can use the `:defaults` option in `simple_form_for`. Specific options in `in
|
|
128
139
|
overwrite the defaults:
|
129
140
|
|
130
141
|
```erb
|
131
|
-
<%= simple_form_for @user, :
|
132
|
-
<%= f.input :username, :
|
133
|
-
<%= f.input :password, :
|
134
|
-
<%= f.input :remember_me, :
|
142
|
+
<%= simple_form_for @user, defaults: { input_html: { class: 'default_class' } } do |f| %>
|
143
|
+
<%= f.input :username, input_html: { class: 'special' } %>
|
144
|
+
<%= f.input :password, input_html: { maxlength: 20 } %>
|
145
|
+
<%= f.input :remember_me, input_html: { value: '1' } %>
|
135
146
|
<%= f.button :submit %>
|
136
147
|
<% end %>
|
137
148
|
```
|
138
149
|
|
139
|
-
Since **
|
150
|
+
Since **Simple Form** generates a wrapper div around your label and input by default, you can pass
|
140
151
|
any html attribute to that wrapper as well using the `:wrapper_html` option, like so:
|
141
152
|
|
142
153
|
```erb
|
143
154
|
<%= simple_form_for @user do |f| %>
|
144
|
-
<%= f.input :username, :
|
145
|
-
<%= f.input :password, :
|
146
|
-
<%= f.input :remember_me, :
|
155
|
+
<%= f.input :username, wrapper_html: { class: 'username' } %>
|
156
|
+
<%= f.input :password, wrapper_html: { id: 'password' } %>
|
157
|
+
<%= f.input :remember_me, wrapper_html: { class: 'options' } %>
|
147
158
|
<%= f.button :submit %>
|
148
159
|
<% end %>
|
149
160
|
```
|
150
161
|
|
151
162
|
Required fields are marked with an * prepended to their labels.
|
152
163
|
|
153
|
-
By default all inputs are required. When the form object has `presence` validations attached to its
|
164
|
+
By default all inputs are required. When the form object has `presence` validations attached to its
|
165
|
+
fields, **Simple Form** tells required and optional fields apart. For performance reasons, this
|
166
|
+
detection is skipped on validations that make use of conditional options, such as `:if` and `:unless`.
|
154
167
|
|
155
168
|
And of course, the `required` property of any input can be overwritten as needed:
|
156
169
|
|
157
170
|
```erb
|
158
171
|
<%= simple_form_for @user do |f| %>
|
159
|
-
<%= f.input :name, :
|
172
|
+
<%= f.input :name, required: false %>
|
160
173
|
<%= f.input :username %>
|
161
174
|
<%= f.input :password %>
|
162
175
|
<%= f.button :submit %>
|
163
176
|
<% end %>
|
164
177
|
```
|
165
178
|
|
166
|
-
**
|
179
|
+
**Simple Form** also lets you overwrite the default input type it creates:
|
167
180
|
|
168
181
|
```erb
|
169
182
|
<%= simple_form_for @user do |f| %>
|
170
183
|
<%= f.input :username %>
|
171
184
|
<%= f.input :password %>
|
172
|
-
<%= f.input :description, :
|
173
|
-
<%= f.input :accepts, :
|
185
|
+
<%= f.input :description, as: :text %>
|
186
|
+
<%= f.input :accepts, as: :radio_buttons %>
|
174
187
|
<%= f.button :submit %>
|
175
188
|
<% end %>
|
176
189
|
```
|
177
190
|
|
178
191
|
So instead of a checkbox for the *accepts* attribute, you'll have a pair of radio buttons with yes/no
|
179
192
|
labels and a text area instead of a text field for the description. You can also render boolean
|
180
|
-
attributes using
|
193
|
+
attributes using `as: :select` to show a dropdown.
|
181
194
|
|
182
|
-
It is also possible to give the `:disabled` option to **
|
195
|
+
It is also possible to give the `:disabled` option to **Simple Form**, and it'll automatically mark
|
183
196
|
the wrapper as disabled with a css class, so you can style labels, hints and other components inside
|
184
197
|
the wrapper as well:
|
185
198
|
|
186
199
|
```erb
|
187
200
|
<%= simple_form_for @user do |f| %>
|
188
|
-
<%= f.input :username, :
|
201
|
+
<%= f.input :username, disabled: true, hint: 'You cannot change your username.' %>
|
189
202
|
<%= f.button :submit %>
|
190
203
|
<% end %>
|
191
204
|
```
|
192
205
|
|
193
|
-
**
|
206
|
+
**Simple Form** accepts same options as their corresponding input type helper in Rails:
|
194
207
|
|
195
208
|
```erb
|
196
209
|
<%= simple_form_for @user do |f| %>
|
197
|
-
<%= f.input :date_of_birth, :
|
198
|
-
:
|
199
|
-
:
|
210
|
+
<%= f.input :date_of_birth, as: :date, start_year: Date.today.year - 90,
|
211
|
+
end_year: Date.today.year - 12, discard_day: true,
|
212
|
+
order: [:month, :year] %>
|
200
213
|
<%= f.button :submit %>
|
201
214
|
<% end %>
|
202
215
|
```
|
203
216
|
|
204
|
-
**
|
217
|
+
**Simple Form** also allows you to use label, hint, input_field, error and full_error helpers
|
205
218
|
(please take a look at the rdocs for each method for more info):
|
206
219
|
|
207
220
|
```erb
|
@@ -209,7 +222,7 @@ the wrapper as well:
|
|
209
222
|
<%= f.label :username %>
|
210
223
|
<%= f.input_field :username %>
|
211
224
|
<%= f.hint 'No special characters, please!' %>
|
212
|
-
<%= f.error :username, :
|
225
|
+
<%= f.error :username, id: 'user_name_error' %>
|
213
226
|
<%= f.full_error :token %>
|
214
227
|
<%= f.submit 'Save' %>
|
215
228
|
<% end %>
|
@@ -217,6 +230,29 @@ the wrapper as well:
|
|
217
230
|
|
218
231
|
Any extra option passed to these methods will be rendered as html option.
|
219
232
|
|
233
|
+
### Stripping away all wrapper divs
|
234
|
+
|
235
|
+
**Simple Form** also allows you to strip away all the div wrappers around the `<input>` field that is
|
236
|
+
generated with the usual `f.input`.
|
237
|
+
The easiest way to achieve this is to use `f.input_field`.
|
238
|
+
|
239
|
+
Example:
|
240
|
+
|
241
|
+
```ruby
|
242
|
+
simple_form_for @user do |f|
|
243
|
+
f.input_field :name
|
244
|
+
end
|
245
|
+
```
|
246
|
+
|
247
|
+
Produces:
|
248
|
+
|
249
|
+
```html
|
250
|
+
<input class="string required" id="user_name" maxlength="100"
|
251
|
+
name="user[name]" size="100" type="text" value="Carlos" />
|
252
|
+
```
|
253
|
+
|
254
|
+
To view the actual RDocs for this, check them out here - http://rubydoc.info/github/plataformatec/simple_form/master/SimpleForm/FormBuilder:input_field
|
255
|
+
|
220
256
|
### Collections
|
221
257
|
|
222
258
|
And what if you want to create a select containing the age from 18 to 60 in your form? You can do it
|
@@ -225,14 +261,14 @@ overriding the `:collection` option:
|
|
225
261
|
```erb
|
226
262
|
<%= simple_form_for @user do |f| %>
|
227
263
|
<%= f.input :user %>
|
228
|
-
<%= f.input :age, :
|
264
|
+
<%= f.input :age, collection: 18..60 %>
|
229
265
|
<%= f.button :submit %>
|
230
266
|
<% end %>
|
231
267
|
```
|
232
268
|
|
233
269
|
Collections can be arrays or ranges, and when a `:collection` is given the `:select` input will be
|
234
|
-
rendered by default, so we don't need to pass the
|
235
|
-
are `:radio_buttons` and `:check_boxes`. Those are added by **
|
270
|
+
rendered by default, so we don't need to pass the `as: :select` option. Other types of collection
|
271
|
+
are `:radio_buttons` and `:check_boxes`. Those are added by **Simple Form** to Rails set of form
|
236
272
|
helpers (read Extra Helpers session below for more information).
|
237
273
|
|
238
274
|
Collection inputs accept two other options beside collections:
|
@@ -248,13 +284,13 @@ translation. All other options given are sent straight to the underlying helper.
|
|
248
284
|
can give prompt as:
|
249
285
|
|
250
286
|
```ruby
|
251
|
-
f.input :age, :
|
287
|
+
f.input :age, collection: 18..60, prompt: "Select your age"
|
252
288
|
```
|
253
289
|
|
254
290
|
It is also possible to create grouped collection selects, that will use the html *optgroup* tags, like this:
|
255
291
|
|
256
292
|
```ruby
|
257
|
-
f.input :country_id, :
|
293
|
+
f.input :country_id, collection: @continents, as: :grouped_select, group_method: :countries
|
258
294
|
```
|
259
295
|
|
260
296
|
Grouped collection inputs accept the same `:label_method` and `:value_method` options, which will be
|
@@ -264,17 +300,17 @@ used to retrieve label/value attributes for the `option` tags. Besides that, you
|
|
264
300
|
each group (required)
|
265
301
|
|
266
302
|
* _group_label_method_ => the label method to be applied on the given collection to retrieve the label
|
267
|
-
for the _optgroup_ (**
|
303
|
+
for the _optgroup_ (**Simple Form** will attempt to guess the best one the same way it does with
|
268
304
|
`:label_method`)
|
269
305
|
|
270
306
|
### Priority
|
271
307
|
|
272
|
-
**
|
308
|
+
**Simple Form** also supports `:time_zone` and `:country`. When using such helpers, you can give
|
273
309
|
`:priority` as option to select which time zones and/or countries should be given higher priority:
|
274
310
|
|
275
311
|
```ruby
|
276
|
-
f.input :residence_country, :
|
277
|
-
f.input :time_zone, :
|
312
|
+
f.input :residence_country, priority: [ "Brazil" ]
|
313
|
+
f.input :time_zone, priority: /US/
|
278
314
|
```
|
279
315
|
|
280
316
|
Those values can also be configured with a default value to be used site use through the
|
@@ -284,12 +320,12 @@ Note: While using `country_select` if you want to restrict to only a subset of c
|
|
284
320
|
drop down then you may use the `:collection` option:
|
285
321
|
|
286
322
|
```ruby
|
287
|
-
f.input :shipping_country, :
|
323
|
+
f.input :shipping_country, priority: [ "Brazil" ], collection: [ "Australia", "Brazil", "New Zealand"]
|
288
324
|
```
|
289
325
|
|
290
326
|
### Associations
|
291
327
|
|
292
|
-
To deal with associations, **
|
328
|
+
To deal with associations, **Simple Form** can generate select inputs, a series of radios buttons or check boxes.
|
293
329
|
Lets see how it works: imagine you have a user model that belongs to a company and has_and_belongs_to_many
|
294
330
|
roles. The structure would be something like:
|
295
331
|
|
@@ -324,8 +360,8 @@ Simple enough, right? This is going to render a `:select` input for choosing the
|
|
324
360
|
buttons and check boxes as well:
|
325
361
|
|
326
362
|
```ruby
|
327
|
-
f.association :company, :
|
328
|
-
f.association :roles, :
|
363
|
+
f.association :company, as: :radio_buttons
|
364
|
+
f.association :roles, as: :check_boxes
|
329
365
|
```
|
330
366
|
|
331
367
|
The association helper just invokes `input` under the hood, so all options available to `:select`,
|
@@ -333,18 +369,21 @@ The association helper just invokes `input` under the hood, so all options avail
|
|
333
369
|
the collection by hand, all together with the prompt:
|
334
370
|
|
335
371
|
```ruby
|
336
|
-
f.association :company, :
|
372
|
+
f.association :company, collection: Company.active.all(order: 'name'), prompt: "Choose a Company"
|
337
373
|
```
|
338
374
|
|
339
375
|
In case you want to declare different labels and values:
|
340
376
|
|
341
377
|
```ruby
|
342
|
-
f.association :company, :
|
378
|
+
f.association :company, label_method: :company_name, value_method: :id, include_blank: false
|
343
379
|
```
|
344
380
|
|
381
|
+
Please note that the association helper is currently only tested with Active Record. It currently
|
382
|
+
does not work well with Mongoid and depending on the ORM you're using your mileage may vary.
|
383
|
+
|
345
384
|
### Buttons
|
346
385
|
|
347
|
-
All web forms need buttons, right? **
|
386
|
+
All web forms need buttons, right? **Simple Form** wraps them in the DSL, acting like a proxy:
|
348
387
|
|
349
388
|
```erb
|
350
389
|
<%= simple_form_for @user do |f| %>
|
@@ -357,12 +396,12 @@ The above will simply call submit. You choose to use it or not, it's just a ques
|
|
357
396
|
|
358
397
|
### Wrapping Rails Form Helpers
|
359
398
|
|
360
|
-
Say you wanted to use a rails form helper but still wrap it in **
|
399
|
+
Say you wanted to use a rails form helper but still wrap it in **Simple Form** goodness? You can, by
|
361
400
|
calling input with a block like so:
|
362
401
|
|
363
402
|
```erb
|
364
403
|
<%= f.input :role do %>
|
365
|
-
<%= f.select :role, Role.all.map { |r| [r.name, r.id, { :
|
404
|
+
<%= f.select :role, Role.all.map { |r| [r.name, r.id, { class: r.company.id }] }, include_blank: true %>
|
366
405
|
<% end %>
|
367
406
|
```
|
368
407
|
|
@@ -371,12 +410,12 @@ hash of additional attributes for each option.
|
|
371
410
|
|
372
411
|
### Extra helpers
|
373
412
|
|
374
|
-
**
|
413
|
+
**Simple Form** also comes with some extra helpers you can use inside rails default forms without relying
|
375
414
|
on `simple_form_for` helper. They are listed below.
|
376
415
|
|
377
416
|
#### Simple Fields For
|
378
417
|
|
379
|
-
Wrapper to use **
|
418
|
+
Wrapper to use **Simple Form** inside a default rails form. It works in the same way that the `fields_for`
|
380
419
|
Rails helper, but change the builder to use the `SimpleForm::FormBuilder`.
|
381
420
|
|
382
421
|
```ruby
|
@@ -388,7 +427,6 @@ form_for @user do |f|
|
|
388
427
|
end
|
389
428
|
```
|
390
429
|
|
391
|
-
|
392
430
|
#### Collection Radio Buttons
|
393
431
|
|
394
432
|
Creates a collection of radio inputs with labels associated (same API as `collection_select`):
|
@@ -435,7 +473,7 @@ end
|
|
435
473
|
|
436
474
|
## Mappings/Inputs available
|
437
475
|
|
438
|
-
**
|
476
|
+
**Simple Form** comes with a lot of default mappings:
|
439
477
|
|
440
478
|
```text
|
441
479
|
Mapping Input Column Type
|
@@ -466,7 +504,7 @@ time_zone time zone select string with name matching "t
|
|
466
504
|
|
467
505
|
## Custom inputs
|
468
506
|
|
469
|
-
It is very easy to add custom inputs to **
|
507
|
+
It is very easy to add custom inputs to **Simple Form**. For instance, if you want to add a custom input
|
470
508
|
that extends the string one, you just need to add this file:
|
471
509
|
|
472
510
|
```ruby
|
@@ -481,10 +519,10 @@ end
|
|
481
519
|
And use it in your views:
|
482
520
|
|
483
521
|
```ruby
|
484
|
-
f.input :money, :
|
522
|
+
f.input :money, as: :currency
|
485
523
|
```
|
486
524
|
|
487
|
-
You can also redefine existing **
|
525
|
+
You can also redefine existing **Simple Form** inputs by creating a new class with the same name. For
|
488
526
|
instance, if you want to wrap date/time/datetime in a div, you can do:
|
489
527
|
|
490
528
|
```ruby
|
@@ -509,14 +547,14 @@ end
|
|
509
547
|
|
510
548
|
## Custom form builder
|
511
549
|
|
512
|
-
You can create a custom form builder that uses **
|
550
|
+
You can create a custom form builder that uses **Simple Form**.
|
513
551
|
|
514
552
|
Create a helper method that calls `simple_form_for` with a custom builder:
|
515
553
|
|
516
554
|
```ruby
|
517
555
|
def custom_form_for(object, *args, &block)
|
518
556
|
options = args.extract_options!
|
519
|
-
simple_form_for(object, *(args << options.merge(:
|
557
|
+
simple_form_for(object, *(args << options.merge(builder: CustomFormBuilder)), &block)
|
520
558
|
end
|
521
559
|
```
|
522
560
|
|
@@ -525,7 +563,7 @@ Create a form builder class that inherits from `SimpleForm::FormBuilder`.
|
|
525
563
|
```ruby
|
526
564
|
class CustomFormBuilder < SimpleForm::FormBuilder
|
527
565
|
def input(attribute_name, options = {}, &block)
|
528
|
-
options[:input_html].merge! :
|
566
|
+
options[:input_html].merge! class: 'custom'
|
529
567
|
super
|
530
568
|
end
|
531
569
|
end
|
@@ -533,7 +571,7 @@ end
|
|
533
571
|
|
534
572
|
## I18n
|
535
573
|
|
536
|
-
**
|
574
|
+
**Simple Form** uses all power of I18n API to lookup labels, hints and placeholders. To customize your
|
537
575
|
forms you can create a locale file like this:
|
538
576
|
|
539
577
|
```yaml
|
@@ -555,7 +593,7 @@ en:
|
|
555
593
|
|
556
594
|
And your forms will use this information to render the components for you.
|
557
595
|
|
558
|
-
**
|
596
|
+
**Simple Form** also lets you be more specific, separating lookups through actions for labels, hints and
|
559
597
|
placeholders. Let's say you want a different label for new and edit actions, the locale file would
|
560
598
|
be something like:
|
561
599
|
|
@@ -571,7 +609,7 @@ en:
|
|
571
609
|
password: 'Change password'
|
572
610
|
```
|
573
611
|
|
574
|
-
This way **
|
612
|
+
This way **Simple Form** will figure out the right translation for you, based on the action being
|
575
613
|
rendered. And to be a little bit DRYer with your locale file, you can specify defaults for all
|
576
614
|
models under the 'defaults' key:
|
577
615
|
|
@@ -594,24 +632,24 @@ en:
|
|
594
632
|
password: '****'
|
595
633
|
```
|
596
634
|
|
597
|
-
**
|
635
|
+
**Simple Form** will always look for a default attribute translation under the "defaults" key if no
|
598
636
|
specific is found inside the model key. Note that this syntax is different from 1.x. To migrate to
|
599
637
|
the new syntax, just move "labels.#{attribute}" to "labels.defaults.#{attribute}".
|
600
638
|
|
601
|
-
In addition, **
|
639
|
+
In addition, **Simple Form** will fallback to default human_attribute_name from Rails when no other
|
602
640
|
translation is found for labels. Finally, you can also overwrite any label, hint or placeholder
|
603
641
|
inside your view, just by passing the option manually. This way the I18n lookup will be skipped.
|
604
642
|
|
605
|
-
**
|
643
|
+
**Simple Form** also has support for translating options in collection helpers. For instance, given a
|
606
644
|
User with a `:gender` attribute, you might want to create a select box showing translated labels
|
607
|
-
that would post either `male` or `female` as value. With **
|
645
|
+
that would post either `male` or `female` as value. With **Simple Form** you could create an input
|
608
646
|
like this:
|
609
647
|
|
610
648
|
```ruby
|
611
|
-
f.input :gender, :
|
649
|
+
f.input :gender, collection: [:male, :female]
|
612
650
|
```
|
613
651
|
|
614
|
-
And **
|
652
|
+
And **Simple Form** will try a lookup like this in your locale file, to find the right labels to show:
|
615
653
|
|
616
654
|
```yaml
|
617
655
|
en:
|
@@ -624,7 +662,7 @@ en:
|
|
624
662
|
```
|
625
663
|
|
626
664
|
You can also use the `defaults` key as you would do with labels, hints and placeholders. It is
|
627
|
-
important to notice that **
|
665
|
+
important to notice that **Simple Form** will only do the lookup for options if you give a collection
|
628
666
|
composed of symbols only. This is to avoid constant lookups to I18n.
|
629
667
|
|
630
668
|
It's also possible to translate buttons, using Rails' built-in I18n support:
|
@@ -667,27 +705,27 @@ en:
|
|
667
705
|
name: Name
|
668
706
|
```
|
669
707
|
|
670
|
-
This difference exists because **
|
708
|
+
This difference exists because **Simple Form** relies on `object_name` provided by Rails'
|
671
709
|
FormBuilder to determine the translation path for a given object instead of `i18n_key` from the
|
672
710
|
object itself. Thus, similarly, if a form for an `Admin::User` object is defined by calling
|
673
|
-
`simple_form_for @admin_user, :
|
711
|
+
`simple_form_for @admin_user, as: :some_user`, **Simple Form** will look for translations
|
674
712
|
under `some_user` instead of `admin_user`.
|
675
713
|
|
676
714
|
## Configuration
|
677
715
|
|
678
|
-
**
|
679
|
-
created by **
|
716
|
+
**Simple Form** has several configuration options. You can read and change them in the initializer
|
717
|
+
created by **Simple Form**, so if you haven't executed the command below yet, please do:
|
680
718
|
|
681
719
|
`rails generate simple_form:install`
|
682
720
|
|
683
721
|
### The wrappers API
|
684
722
|
|
685
|
-
With **
|
723
|
+
With **Simple Form** you can configure how your components will be rendered using the wrappers API.
|
686
724
|
The syntax looks like this:
|
687
725
|
|
688
726
|
```ruby
|
689
|
-
config.wrappers :
|
690
|
-
:
|
727
|
+
config.wrappers tag: :div, class: :input,
|
728
|
+
error_class: :field_with_errors do |b|
|
691
729
|
|
692
730
|
# Form extensions
|
693
731
|
b.use :html5
|
@@ -698,12 +736,13 @@ config.wrappers :tag => :div, :class => :input,
|
|
698
736
|
|
699
737
|
# Form components
|
700
738
|
b.use :label_input
|
701
|
-
b.use :hint, :
|
702
|
-
b.use :error, :
|
739
|
+
b.use :hint, wrap_with: { tag: :span, class: :hint }
|
740
|
+
b.use :error, wrap_with: { tag: :span, class: :error }
|
703
741
|
end
|
704
742
|
```
|
705
743
|
|
706
|
-
The _Form components_ will generate the form tags like labels, inputs, hints or errors contents.
|
744
|
+
The _Form components_ will generate the form tags like labels, inputs, hints or errors contents.
|
745
|
+
The available components are:
|
707
746
|
|
708
747
|
```ruby
|
709
748
|
:label # The <label> tag alone
|
@@ -722,9 +761,9 @@ You can create new _Form components_ using the wrappers API as in the following
|
|
722
761
|
config.wrappers do |b|
|
723
762
|
b.use :placeholder
|
724
763
|
b.use :label_input
|
725
|
-
b.wrapper :
|
726
|
-
component.use :hint, :
|
727
|
-
component.use :error, :
|
764
|
+
b.wrapper tag: :div, class: 'separator' do |component|
|
765
|
+
component.use :hint, wrap_with: { tag: :span, class: :hint }
|
766
|
+
component.use :error, wrap_with: { tag: :span, class: :error }
|
728
767
|
end
|
729
768
|
end
|
730
769
|
```
|
@@ -737,9 +776,9 @@ If you want to customize the custom _Form components_ on demand you can give it
|
|
737
776
|
config.wrappers do |b|
|
738
777
|
b.use :placeholder
|
739
778
|
b.use :label_input
|
740
|
-
b.wrapper :my_wrapper, :
|
741
|
-
component.use :hint, :
|
742
|
-
component.use :error, :
|
779
|
+
b.wrapper :my_wrapper, tag: :div, class: 'separator' do |component|
|
780
|
+
component.use :hint, wrap_with: { tag: :span, class: :hint }
|
781
|
+
component.use :error, wrap_with: { tag: :span, class: :error }
|
743
782
|
end
|
744
783
|
end
|
745
784
|
```
|
@@ -748,13 +787,13 @@ and now you can pass options to your `input` calls to customize the `:my_wrapper
|
|
748
787
|
|
749
788
|
```ruby
|
750
789
|
# Completely turns off the custom wrapper
|
751
|
-
f.input :name, :
|
790
|
+
f.input :name, my_wrapper: false
|
752
791
|
|
753
792
|
# Configure the html
|
754
|
-
f.input :name, :
|
793
|
+
f.input :name, my_wrapper_html: { id: 'special_id' }
|
755
794
|
|
756
795
|
# Configure the tag
|
757
|
-
f.input :name, :
|
796
|
+
f.input :name, my_wrapper_tag: :p
|
758
797
|
```
|
759
798
|
|
760
799
|
You can also define more than one wrapper and pick one to render in a specific form or input.
|
@@ -771,37 +810,37 @@ and use it in this way:
|
|
771
810
|
|
772
811
|
```ruby
|
773
812
|
# Specifying to whole form
|
774
|
-
simple_form_for @user, :
|
813
|
+
simple_form_for @user, wrapper: :small do |f|
|
775
814
|
f.input :name
|
776
815
|
end
|
777
816
|
|
778
817
|
# Specifying to one input
|
779
818
|
simple_form_for @user do |f|
|
780
|
-
f.input :name, :
|
819
|
+
f.input :name, wrapper: :small
|
781
820
|
end
|
782
821
|
```
|
783
822
|
|
784
|
-
**
|
823
|
+
**Simple Form** also allows you to use optional elements. For instance, let's suppose you want to use
|
785
824
|
hints or placeholders, but you don't want them to be generated automatically. You can set their
|
786
|
-
default values to `false` or use the `optional` method. Is
|
825
|
+
default values to `false` or use the `optional` method. Is preferable to use the `optional` syntax:
|
787
826
|
|
788
827
|
```ruby
|
789
|
-
config.wrappers :
|
828
|
+
config.wrappers placeholder: false do |b|
|
790
829
|
b.use :placeholder
|
791
830
|
b.use :label_input
|
792
|
-
b.wrapper :
|
793
|
-
component.optional :hint, :
|
794
|
-
component.use :error, :
|
831
|
+
b.wrapper tag: :div, class: 'separator' do |component|
|
832
|
+
component.optional :hint, wrap_with: { tag: :span, class: :hint }
|
833
|
+
component.use :error, wrap_with: { tag: :span, class: :error }
|
795
834
|
end
|
796
835
|
end
|
797
836
|
```
|
798
837
|
|
799
|
-
By setting it as `optional`, a hint will only be generated when
|
800
|
-
The same for
|
838
|
+
By setting it as `optional`, a hint will only be generated when `hint: true` is explicitly used.
|
839
|
+
The same for placeholder.
|
801
840
|
|
802
841
|
## HTML 5 Notice
|
803
842
|
|
804
|
-
By default, **
|
843
|
+
By default, **Simple Form** will generate input field types and attributes that are supported in HTML5,
|
805
844
|
but are considered invalid HTML for older document types such as HTML4 or XHTML1.0. The HTML5
|
806
845
|
extensions include the new field types such as email, number, search, url, tel, and the new
|
807
846
|
attributes such as required, autofocus, maxlength, min, max, step.
|
@@ -811,7 +850,7 @@ required attribute to force a value into an input and will prevent form submissi
|
|
811
850
|
Depending on the design of the application this may or may not be desired. In many cases it can
|
812
851
|
break existing UI's.
|
813
852
|
|
814
|
-
It is possible to disable all HTML 5 extensions in **
|
853
|
+
It is possible to disable all HTML 5 extensions in **Simple Form** with the following configuration:
|
815
854
|
|
816
855
|
```ruby
|
817
856
|
SimpleForm.html5 = false # default is true
|
@@ -831,14 +870,14 @@ help you to use some generic javascript validation.
|
|
831
870
|
You can also add `novalidate` to a specific form by setting the option on the form itself:
|
832
871
|
|
833
872
|
```erb
|
834
|
-
<%= simple_form_for(resource, :
|
873
|
+
<%= simple_form_for(resource, html: {novalidate: true}) do |form| %>
|
835
874
|
```
|
836
875
|
|
837
|
-
Please notice that any of the configurations above will disable the `placeholder` component,
|
876
|
+
Please notice that any of the configurations above will not disable the `placeholder` component,
|
838
877
|
which is an HTML 5 feature. We believe most of the newest browsers are handling this attribute fine,
|
839
878
|
and if they aren't, any plugin you use would take of using the placeholder attribute to do it.
|
840
879
|
However, you can disable it if you want, by removing the placeholder component from the components
|
841
|
-
list in **
|
880
|
+
list in **Simple Form** configuration file.
|
842
881
|
|
843
882
|
## Information
|
844
883
|
|
@@ -851,11 +890,11 @@ http://groups.google.com/group/plataformatec-simpleform
|
|
851
890
|
|
852
891
|
### RDocs
|
853
892
|
|
854
|
-
You can view the **
|
893
|
+
You can view the **Simple Form** documentation in RDoc format here:
|
855
894
|
|
856
895
|
http://rubydoc.info/github/plataformatec/simple_form/master/frames
|
857
896
|
|
858
|
-
If you need to use **
|
897
|
+
If you need to use **Simple Form** with Rails 2.3, you can always run `gem server` from the command line
|
859
898
|
after you install the gem to access the old documentation.
|
860
899
|
|
861
900
|
### Bug reports
|
@@ -876,3 +915,6 @@ https://github.com/plataformatec/simple_form/issues
|
|
876
915
|
## License
|
877
916
|
|
878
917
|
MIT License. Copyright 2009-2013 Plataformatec. http://plataformatec.com.br
|
918
|
+
|
919
|
+
You are not granted rights or licenses to the trademarks of the Plataformatec, including without
|
920
|
+
limitation the Simple Form name or logo.
|