formtastic 3.0.0 → 5.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -13
- data/.gitattributes +1 -0
- data/.github/workflows/test.yml +61 -0
- data/.gitignore +3 -2
- data/CHANGELOG.md +61 -0
- data/Gemfile.lock +140 -0
- data/MIT-LICENSE +1 -1
- data/{README.textile → README.md} +191 -168
- data/RELEASE_PROCESS +3 -1
- data/Rakefile +24 -8
- data/app/assets/stylesheets/formtastic.css +1 -1
- data/bin/appraisal +8 -0
- data/formtastic.gemspec +13 -17
- data/gemfiles/rails_6.0/Gemfile +5 -0
- data/gemfiles/rails_6.1/Gemfile +5 -0
- data/gemfiles/rails_7.0/Gemfile +5 -0
- data/gemfiles/rails_7.1/Gemfile +5 -0
- data/gemfiles/rails_edge/Gemfile +13 -0
- data/lib/formtastic/action_class_finder.rb +19 -0
- data/lib/formtastic/actions/base.rb +1 -0
- data/lib/formtastic/actions/button_action.rb +56 -53
- data/lib/formtastic/actions/buttonish.rb +1 -0
- data/lib/formtastic/actions/input_action.rb +60 -57
- data/lib/formtastic/actions/link_action.rb +69 -67
- data/lib/formtastic/actions.rb +7 -3
- data/lib/formtastic/deprecation.rb +6 -0
- data/lib/formtastic/engine.rb +4 -1
- data/lib/formtastic/form_builder.rb +32 -25
- data/lib/formtastic/helpers/action_helper.rb +22 -31
- data/lib/formtastic/helpers/actions_helper.rb +1 -0
- data/lib/formtastic/helpers/enum.rb +14 -0
- data/lib/formtastic/helpers/errors_helper.rb +3 -2
- data/lib/formtastic/helpers/fieldset_wrapper.rb +16 -11
- data/lib/formtastic/helpers/file_column_detection.rb +1 -0
- data/lib/formtastic/helpers/form_helper.rb +4 -3
- data/lib/formtastic/helpers/input_helper.rb +59 -80
- data/lib/formtastic/helpers/inputs_helper.rb +33 -27
- data/lib/formtastic/helpers/reflection.rb +5 -4
- data/lib/formtastic/helpers.rb +2 -2
- data/lib/formtastic/html_attributes.rb +13 -1
- data/lib/formtastic/i18n.rb +2 -1
- data/lib/formtastic/input_class_finder.rb +19 -0
- data/lib/formtastic/inputs/base/associations.rb +1 -0
- data/lib/formtastic/inputs/base/choices.rb +4 -3
- data/lib/formtastic/inputs/base/collections.rb +47 -11
- data/lib/formtastic/inputs/base/database.rb +8 -5
- data/lib/formtastic/inputs/base/datetime_pickerish.rb +1 -0
- data/lib/formtastic/inputs/base/errors.rb +7 -6
- data/lib/formtastic/inputs/base/fileish.rb +1 -0
- data/lib/formtastic/inputs/base/hints.rb +2 -1
- data/lib/formtastic/inputs/base/html.rb +12 -10
- data/lib/formtastic/inputs/base/labelling.rb +3 -2
- data/lib/formtastic/inputs/base/naming.rb +5 -4
- data/lib/formtastic/inputs/base/numeric.rb +1 -0
- data/lib/formtastic/inputs/base/options.rb +3 -3
- data/lib/formtastic/inputs/base/placeholder.rb +1 -0
- data/lib/formtastic/inputs/base/stringish.rb +1 -0
- data/lib/formtastic/inputs/base/timeish.rb +9 -4
- data/lib/formtastic/inputs/base/validations.rb +39 -12
- data/lib/formtastic/inputs/base/wrapping.rb +2 -3
- data/lib/formtastic/inputs/base.rb +17 -12
- data/lib/formtastic/inputs/boolean_input.rb +2 -1
- data/lib/formtastic/inputs/check_boxes_input.rb +16 -24
- data/lib/formtastic/inputs/color_input.rb +1 -1
- data/lib/formtastic/inputs/country_input.rb +4 -1
- data/lib/formtastic/inputs/datalist_input.rb +42 -0
- data/lib/formtastic/inputs/date_picker_input.rb +1 -0
- data/lib/formtastic/inputs/date_select_input.rb +1 -0
- data/lib/formtastic/inputs/datetime_picker_input.rb +1 -0
- data/lib/formtastic/inputs/datetime_select_input.rb +1 -0
- data/lib/formtastic/inputs/email_input.rb +1 -0
- data/lib/formtastic/inputs/file_input.rb +3 -2
- data/lib/formtastic/inputs/hidden_input.rb +3 -2
- data/lib/formtastic/inputs/number_input.rb +1 -0
- data/lib/formtastic/inputs/password_input.rb +1 -0
- data/lib/formtastic/inputs/phone_input.rb +1 -0
- data/lib/formtastic/inputs/radio_input.rb +26 -21
- data/lib/formtastic/inputs/range_input.rb +1 -0
- data/lib/formtastic/inputs/search_input.rb +1 -0
- data/lib/formtastic/inputs/select_input.rb +32 -10
- data/lib/formtastic/inputs/string_input.rb +1 -0
- data/lib/formtastic/inputs/text_input.rb +1 -0
- data/lib/formtastic/inputs/time_picker_input.rb +1 -0
- data/lib/formtastic/inputs/time_select_input.rb +1 -0
- data/lib/formtastic/inputs/time_zone_input.rb +17 -6
- data/lib/formtastic/inputs/url_input.rb +1 -0
- data/lib/formtastic/inputs.rb +33 -28
- data/lib/formtastic/localized_string.rb +2 -1
- data/lib/formtastic/localizer.rb +23 -24
- data/lib/formtastic/namespaced_class_finder.rb +98 -0
- data/lib/formtastic/version.rb +2 -1
- data/lib/formtastic.rb +19 -14
- data/lib/generators/formtastic/form/form_generator.rb +8 -2
- data/lib/generators/formtastic/input/input_generator.rb +47 -0
- data/lib/generators/formtastic/install/install_generator.rb +2 -0
- data/lib/generators/templates/formtastic.rb +29 -7
- data/lib/generators/templates/input.rb +19 -0
- data/sample/basic_inputs.html +1 -1
- data/script/integration-template.rb +73 -0
- data/script/integration.sh +19 -0
- data/spec/action_class_finder_spec.rb +13 -0
- data/spec/actions/button_action_spec.rb +21 -20
- data/spec/actions/generic_action_spec.rb +134 -133
- data/spec/actions/input_action_spec.rb +20 -19
- data/spec/actions/link_action_spec.rb +30 -29
- data/spec/builder/custom_builder_spec.rb +39 -22
- data/spec/builder/error_proc_spec.rb +6 -5
- data/spec/builder/semantic_fields_for_spec.rb +46 -45
- data/spec/fast_spec_helper.rb +13 -0
- data/spec/generators/formtastic/form/form_generator_spec.rb +33 -32
- data/spec/generators/formtastic/input/input_generator_spec.rb +125 -0
- data/spec/generators/formtastic/install/install_generator_spec.rb +10 -9
- data/spec/helpers/action_helper_spec.rb +70 -97
- data/spec/helpers/actions_helper_spec.rb +43 -42
- data/spec/helpers/form_helper_spec.rb +56 -39
- data/spec/helpers/input_helper_spec.rb +314 -255
- data/spec/helpers/inputs_helper_spec.rb +217 -202
- data/spec/helpers/reflection_helper_spec.rb +7 -6
- data/spec/helpers/semantic_errors_helper_spec.rb +26 -25
- data/spec/i18n_spec.rb +30 -29
- data/spec/input_class_finder_spec.rb +11 -0
- data/spec/inputs/base/collections_spec.rb +78 -0
- data/spec/inputs/base/validations_spec.rb +481 -0
- data/spec/inputs/boolean_input_spec.rb +73 -72
- data/spec/inputs/check_boxes_input_spec.rb +174 -123
- data/spec/inputs/color_input_spec.rb +53 -64
- data/spec/inputs/country_input_spec.rb +23 -22
- data/spec/inputs/custom_input_spec.rb +3 -6
- data/spec/inputs/datalist_input_spec.rb +62 -0
- data/spec/inputs/date_picker_input_spec.rb +114 -113
- data/spec/inputs/date_select_input_spec.rb +76 -61
- data/spec/inputs/datetime_picker_input_spec.rb +123 -122
- data/spec/inputs/datetime_select_input_spec.rb +85 -68
- data/spec/inputs/email_input_spec.rb +17 -16
- data/spec/inputs/file_input_spec.rb +18 -17
- data/spec/inputs/hidden_input_spec.rb +32 -31
- data/spec/inputs/include_blank_spec.rb +10 -9
- data/spec/inputs/label_spec.rb +36 -31
- data/spec/inputs/number_input_spec.rb +212 -211
- data/spec/inputs/password_input_spec.rb +17 -16
- data/spec/inputs/phone_input_spec.rb +17 -16
- data/spec/inputs/placeholder_spec.rb +18 -17
- data/spec/inputs/radio_input_spec.rb +92 -65
- data/spec/inputs/range_input_spec.rb +136 -135
- data/spec/inputs/readonly_spec.rb +51 -0
- data/spec/inputs/search_input_spec.rb +16 -15
- data/spec/inputs/select_input_spec.rb +209 -102
- data/spec/inputs/string_input_spec.rb +51 -50
- data/spec/inputs/text_input_spec.rb +34 -33
- data/spec/inputs/time_picker_input_spec.rb +115 -114
- data/spec/inputs/time_select_input_spec.rb +84 -70
- data/spec/inputs/time_zone_input_spec.rb +58 -31
- data/spec/inputs/url_input_spec.rb +17 -16
- data/spec/inputs/with_options_spec.rb +9 -8
- data/spec/localizer_spec.rb +18 -17
- data/spec/namespaced_class_finder_spec.rb +91 -0
- data/spec/schema.rb +22 -0
- data/spec/spec_helper.rb +180 -249
- data/spec/support/custom_macros.rb +128 -98
- data/spec/support/deprecation.rb +2 -1
- data/spec/support/shared_examples.rb +13 -0
- data/spec/support/specialized_class_finder_shared_example.rb +28 -0
- data/spec/support/test_environment.rb +25 -10
- metadata +95 -136
- data/.travis.yml +0 -28
- data/Appraisals +0 -25
- data/CHANGELOG +0 -27
- data/gemfiles/rails_3.2.gemfile +0 -7
- data/gemfiles/rails_4.0.4.gemfile +0 -7
- data/gemfiles/rails_4.1.gemfile +0 -7
- data/gemfiles/rails_4.gemfile +0 -7
- data/gemfiles/rails_edge.gemfile +0 -10
- data/lib/formtastic/util.rb +0 -53
- data/spec/support/deferred_garbage_collection.rb +0 -21
- data/spec/util_spec.rb +0 -52
@@ -1,36 +1,32 @@
|
|
1
|
-
|
1
|
+
# Formtastic
|
2
2
|
|
3
|
-
!https://
|
4
|
-
!
|
5
|
-
!https://codeclimate.com/github/
|
6
|
-
!https://badge.fury.io/rb/formtastic.
|
7
|
-
!https://gemnasium.com/justinfrench/formtastic.png!:https://gemnasium.com/justinfrench/formtastic
|
3
|
+
[![Build Status](https://github.com/formtastic/formtastic/workflows/test/badge.svg)](https://github.com/formtastic/formtastic/actions)
|
4
|
+
[![Inline docs](https://inch-ci.org/github/justinfrench/formtastic.svg?branch=master)](https://inch-ci.org/github/justinfrench/formtastic)
|
5
|
+
[![Code Climate](https://codeclimate.com/github/formtastic/formtastic/badges/gpa.svg)](https://codeclimate.com/github/formtastic/formtastic)
|
6
|
+
[![Gem Version](https://badge.fury.io/rb/formtastic.svg)](https://badge.fury.io/rb/formtastic)
|
8
7
|
|
9
8
|
Formtastic is a Rails FormBuilder DSL (with some other goodies) to make it far easier to create beautiful, semantically rich, syntactically awesome, readily stylable and wonderfully accessible HTML forms in your Rails applications.
|
10
9
|
|
10
|
+
## Documentation & Support
|
11
11
|
|
12
|
-
|
12
|
+
* [Documentation is available on rdoc.info](https://rdoc.info/projects/formtastic/formtastic)
|
13
|
+
* [We track issues & bugs on GitHub](https://github.com/formtastic/formtastic/issues)
|
14
|
+
* [We have a wiki on GitHub](https://github.com/formtastic/formtastic/wiki)
|
15
|
+
* [StackOverflow can help](https://stackoverflow.com/questions/tagged/formtastic)
|
13
16
|
|
14
|
-
|
15
|
-
* "We track issues & bugs on GitHub":http://github.com/justinfrench/formtastic/issues
|
16
|
-
* "We have a wiki on GitHub":http://github.com/justinfrench/formtastic/wiki
|
17
|
-
* "StackOverflow can help":http://stackoverflow.com/questions/tagged/formtastic
|
18
|
-
* "Follow @formtastic on Twitter for news & updates":http://twitter.com/formtastic
|
17
|
+
## Compatibility
|
19
18
|
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
* Formtastic
|
24
|
-
* Formtastic 2.3 is Rails 3 and Rails 4 compatible (Rails < 3.2.13 is deprecated)
|
25
|
-
* Formtastic 2.1 & 2.2 is Rails 3 and Rails 4 compatible
|
19
|
+
* Formtastic 5 requires Rails 6.0 and Ruby 2.6 minimum
|
20
|
+
* Formtastic 4 requires Rails 5.2 and Ruby 2.4 minimum
|
21
|
+
* Formtastic 3 requires Rails 3.2.13 minimum
|
22
|
+
* Formtastic 2 requires Rails 3
|
26
23
|
* Formtastic, much like Rails, is very ActiveRecord-centric. Many are successfully using other ActiveModel-like ORMs and objects (DataMapper, MongoMapper, Mongoid, Authlogic, Devise...) but we're not guaranteeing full compatibility at this stage. Patches are welcome!
|
27
24
|
|
28
|
-
|
29
|
-
h2. The Story
|
25
|
+
## The Story
|
30
26
|
|
31
27
|
One day, I finally had enough, so I opened up my text editor, and wrote a DSL for how I'd like to author forms:
|
32
28
|
|
33
|
-
|
29
|
+
```erb
|
34
30
|
<%= semantic_form_for @article do |f| %>
|
35
31
|
|
36
32
|
<%= f.inputs :name => "Basic" do %>
|
@@ -60,15 +56,15 @@ One day, I finally had enough, so I opened up my text editor, and wrote a DSL fo
|
|
60
56
|
<% end %>
|
61
57
|
|
62
58
|
<% end %>
|
63
|
-
|
59
|
+
```
|
64
60
|
|
65
|
-
I also wrote the accompanying HTML output I expected, favoring something very similar to the fieldsets, lists and other semantic elements Aaron Gustafson presented in
|
61
|
+
I also wrote the accompanying HTML output I expected, favoring something very similar to the fieldsets, lists and other semantic elements Aaron Gustafson presented in [Learning to Love Forms](https://www.slideshare.net/AaronGustafson/learning-to-love-forms-webvisions-07), hacking together enough Ruby to prove it could be done.
|
66
62
|
|
67
63
|
|
68
|
-
|
64
|
+
## It's awesome because...
|
69
65
|
|
70
|
-
* It can handle
|
71
|
-
* It can handle
|
66
|
+
* It can handle `belongs_to` associations (like Post belongs_to :author), rendering a select or set of radio inputs with choices from the parent model.
|
67
|
+
* It can handle `has_many` and `has_and_belongs_to_many` associations (like: Post has_many :tags), rendering a multi-select with choices from the child models.
|
72
68
|
* It's Rails 3/4 compatible (including nested forms).
|
73
69
|
* It has internationalization (I18n)!
|
74
70
|
* It's _really_ quick to get started with a basic form in place (4 lines), then go back to add in more detail if you need it.
|
@@ -80,7 +76,7 @@ h2. It's awesome because...
|
|
80
76
|
* It has growing HTML5 support (new inputs like email/phone/search, new attributes like required/min/max/step/placeholder)
|
81
77
|
|
82
78
|
|
83
|
-
|
79
|
+
## Opinions
|
84
80
|
|
85
81
|
* It should be easier to do things the right way than the wrong way.
|
86
82
|
* Sometimes _more mark-up_ is better.
|
@@ -88,82 +84,82 @@ h2. Opinions
|
|
88
84
|
* Make the common things we do easy, yet ensure uncommon things are still possible.
|
89
85
|
|
90
86
|
|
91
|
-
|
87
|
+
## Installation
|
92
88
|
|
93
89
|
Simply add Formtastic to your Gemfile and bundle it up:
|
94
90
|
|
95
|
-
|
96
|
-
gem 'formtastic'
|
97
|
-
|
91
|
+
```ruby
|
92
|
+
gem 'formtastic', '~> 5.0'
|
93
|
+
```
|
98
94
|
|
99
95
|
Run the installation generator:
|
100
96
|
|
101
|
-
|
102
|
-
|
103
|
-
|
97
|
+
```shell
|
98
|
+
$ rails generate formtastic:install
|
99
|
+
```
|
104
100
|
|
105
101
|
|
106
|
-
|
102
|
+
## Stylesheets
|
107
103
|
|
108
104
|
A proof-of-concept set of stylesheets are provided which you can include in your layout. Customization is best achieved by overriding these styles in an additional stylesheet.
|
109
105
|
|
110
106
|
Rails 3.1 introduces an asset pipeline that allows plugins like Formtastic to serve their own Stylesheets, Javascripts, etc without having to run generators that copy them across to the host application. Formtastic makes three stylesheets available as an Engine, you just need to require them in your global stylesheets.
|
111
107
|
|
112
|
-
|
108
|
+
```css
|
113
109
|
# app/assets/stylesheets/application.css
|
114
110
|
*= require formtastic
|
115
111
|
*= require my_formtastic_changes
|
116
|
-
|
112
|
+
```
|
117
113
|
|
118
|
-
Conditional stylesheets need to be compiled separately to prevent them being bundled and included with other application styles. Remove
|
114
|
+
Conditional stylesheets need to be compiled separately to prevent them being bundled and included with other application styles. Remove `require_tree .` from application.css and specify required stylesheets individually.
|
119
115
|
|
120
|
-
|
116
|
+
```css
|
121
117
|
# app/assets/stylesheets/ie6.css
|
122
118
|
*= require formtastic_ie6
|
123
119
|
|
124
120
|
# app/assets/stylesheets/ie7.css
|
125
121
|
*= require formtastic_ie7
|
126
|
-
|
122
|
+
```
|
127
123
|
|
128
|
-
|
124
|
+
```erb
|
129
125
|
# app/views/layouts/application.html.erb
|
130
126
|
<%= stylesheet_link_tag 'application' %>
|
131
127
|
<!--[if IE 6]><%= stylesheet_link_tag 'ie6' %><![endif]-->
|
132
128
|
<!--[if IE 7]><%= stylesheet_link_tag 'ie7' %><![endif]-->
|
133
|
-
|
129
|
+
```
|
134
130
|
|
135
|
-
|
131
|
+
```ruby
|
136
132
|
# config/environments/production.rb
|
137
133
|
config.assets.precompile += %w( ie6.css ie7.css )
|
138
|
-
|
134
|
+
```
|
139
135
|
|
140
|
-
|
136
|
+
## Usage
|
141
137
|
|
142
138
|
Forms are really boring to code... you want to get onto the good stuff as fast as possible.
|
143
139
|
|
144
|
-
This renders a set of inputs (one for _most_ columns in the database table, and one for each ActiveRecord
|
140
|
+
This renders a set of inputs (one for _most_ columns in the database table, and one for each ActiveRecord `belongs_to`-association), followed by default action buttons (an input submit button):
|
145
141
|
|
146
|
-
|
142
|
+
```erb
|
147
143
|
<%= semantic_form_for @user do |f| %>
|
148
144
|
<%= f.inputs %>
|
149
145
|
<%= f.actions %>
|
150
146
|
<% end %>
|
151
|
-
|
147
|
+
```
|
152
148
|
|
153
149
|
This is a great way to get something up fast, but like scaffolding, it's *not recommended for production*. Don't be so lazy!
|
154
150
|
|
155
|
-
To specify the order of the fields, skip some of the fields or even add in fields that Formtastic couldn't infer. You can pass in a list of field names to
|
151
|
+
To specify the order of the fields, skip some of the fields or even add in fields that Formtastic couldn't infer. You can pass in a list of field names to `inputs` and list of action names to `actions`:
|
156
152
|
|
157
|
-
|
153
|
+
```erb
|
158
154
|
<%= semantic_form_for @user do |f| %>
|
159
155
|
<%= f.inputs :title, :body, :section, :categories, :created_at %>
|
160
156
|
<%= f.actions :submit, :cancel %>
|
161
157
|
<% end %>
|
162
|
-
|
158
|
+
```
|
163
159
|
|
164
|
-
You probably want control over the input type Formtastic uses for each field. You can expand the
|
160
|
+
You probably want control over the input type Formtastic uses for each field. You can expand the `inputs` and `actions` to block helper format and use the `:as` option to specify an exact input type:
|
165
161
|
|
166
|
-
|
162
|
+
```erb
|
167
163
|
<%= semantic_form_for @post do |f| %>
|
168
164
|
<%= f.inputs do %>
|
169
165
|
<%= f.input :title %>
|
@@ -177,11 +173,11 @@ You probably want control over the input type Formtastic uses for each field. Yo
|
|
177
173
|
<%= f.action :cancel, :as => :link %>
|
178
174
|
<% end %>
|
179
175
|
<% end %>
|
180
|
-
|
176
|
+
```
|
181
177
|
|
182
178
|
If you want to customize the label text, or render some hint text below the field, specify which fields are required/optional, or break the form into two fieldsets, the DSL is pretty comprehensive:
|
183
179
|
|
184
|
-
|
180
|
+
```erb
|
185
181
|
<%= semantic_form_for @post do |f| %>
|
186
182
|
<%= f.inputs "Basic", :id => "basic" do %>
|
187
183
|
<%= f.input :title %>
|
@@ -190,7 +186,7 @@ If you want to customize the label text, or render some hint text below the fiel
|
|
190
186
|
<%= f.inputs :name => "Advanced Options", :id => "advanced" do %>
|
191
187
|
<%= f.input :slug, :label => "URL Title", :hint => "Created automatically if left blank", :required => false %>
|
192
188
|
<%= f.input :section, :as => :radio %>
|
193
|
-
<%= f.input :user, :label => "Author"
|
189
|
+
<%= f.input :user, :label => "Author" %>
|
194
190
|
<%= f.input :categories, :required => false %>
|
195
191
|
<%= f.input :created_at, :as => :string, :label => "Publication Date", :required => false %>
|
196
192
|
<% end %>
|
@@ -198,17 +194,17 @@ If you want to customize the label text, or render some hint text below the fiel
|
|
198
194
|
<%= f.action :submit %>
|
199
195
|
<% end %>
|
200
196
|
<% end %>
|
201
|
-
|
197
|
+
```
|
202
198
|
|
203
199
|
You can create forms for nested resources:
|
204
200
|
|
205
|
-
|
201
|
+
```erb
|
206
202
|
<%= semantic_form_for [@author, @post] do |f| %>
|
207
|
-
|
203
|
+
```
|
208
204
|
|
209
|
-
Nested forms are also supported (don't forget your models need to be setup correctly with
|
205
|
+
Nested forms are also supported (don't forget your models need to be setup correctly with `accepts_nested_attributes_for`). You can do it in the Rails way:
|
210
206
|
|
211
|
-
|
207
|
+
```erb
|
212
208
|
<%= semantic_form_for @post do |f| %>
|
213
209
|
<%= f.inputs :title, :body, :created_at %>
|
214
210
|
<%= f.semantic_fields_for :author do |author| %>
|
@@ -216,41 +212,41 @@ Nested forms are also supported (don't forget your models need to be setup corre
|
|
216
212
|
<% end %>
|
217
213
|
<%= f.actions %>
|
218
214
|
<% end %>
|
219
|
-
|
215
|
+
```
|
220
216
|
|
221
|
-
Or the Formtastic way with the
|
217
|
+
Or the Formtastic way with the `:for` option:
|
222
218
|
|
223
|
-
|
219
|
+
```erb
|
224
220
|
<%= semantic_form_for @post do |f| %>
|
225
221
|
<%= f.inputs :title, :body, :created_at %>
|
226
222
|
<%= f.inputs :first_name, :last_name, :for => :author, :name => "Author" %>
|
227
223
|
<%= f.actions %>
|
228
224
|
<% end %>
|
229
|
-
|
225
|
+
```
|
230
226
|
|
231
|
-
When working in has many association, you can even supply
|
227
|
+
When working in has many association, you can even supply `"%i"` in your fieldset name; they will be properly interpolated with the child index. For example:
|
232
228
|
|
233
|
-
|
229
|
+
```erb
|
234
230
|
<%= semantic_form_for @post do |f| %>
|
235
231
|
<%= f.inputs %>
|
236
232
|
<%= f.inputs :name => 'Category #%i', :for => :categories %>
|
237
233
|
<%= f.actions %>
|
238
234
|
<% end %>
|
239
|
-
|
235
|
+
```
|
240
236
|
|
241
237
|
Alternatively, the current index can be accessed via the `inputs` block's arguments for use anywhere:
|
242
238
|
|
243
|
-
|
239
|
+
```erb
|
244
240
|
<%= semantic_form_for @post do |f| %>
|
245
241
|
<%= f.inputs :for => :categories do |category, i| %>
|
246
242
|
...
|
247
243
|
<%= f.actions %>
|
248
244
|
<% end %>
|
249
|
-
|
245
|
+
```
|
250
246
|
|
251
247
|
If you have more than one form on the same page, it may lead to HTML invalidation because of the way HTML element id attributes are assigned. You can provide a namespace for your form to ensure uniqueness of id attributes on form elements. The namespace attribute will be prefixed with underscore on the generate HTML id. For example:
|
252
248
|
|
253
|
-
|
249
|
+
```erb
|
254
250
|
<%= semantic_form_for(@post, :namespace => 'cat_form') do |f| %>
|
255
251
|
<%= f.inputs do %>
|
256
252
|
<%= f.input :title %> # id="cat_form_post_title"
|
@@ -259,11 +255,11 @@ If you have more than one form on the same page, it may lead to HTML invalidatio
|
|
259
255
|
<% end %>
|
260
256
|
<%= f.actions %>
|
261
257
|
<% end %>
|
262
|
-
|
258
|
+
```
|
263
259
|
|
264
|
-
Customize HTML attributes for any input using the
|
260
|
+
Customize HTML attributes for any input using the `:input_html` option. Typically this is used to disable the input, change the size of a text field, change the rows in a textarea, or even to add a special class to an input to attach special behavior like [autogrow](https://plugins.jquery.com/project/autogrowtextarea) textareas:
|
265
261
|
|
266
|
-
|
262
|
+
```erb
|
267
263
|
<%= semantic_form_for @post do |f| %>
|
268
264
|
<%= f.inputs do %>
|
269
265
|
<%= f.input :title, :input_html => { :size => 10 } %>
|
@@ -273,22 +269,22 @@ Customize HTML attributes for any input using the @:input_html@ option. Typicall
|
|
273
269
|
<% end %>
|
274
270
|
<%= f.actions %>
|
275
271
|
<% end %>
|
276
|
-
|
272
|
+
```
|
277
273
|
|
278
|
-
The same can be done for actions with the
|
274
|
+
The same can be done for actions with the `:button_html` option:
|
279
275
|
|
280
|
-
|
276
|
+
```erb
|
281
277
|
<%= semantic_form_for @post do |f| %>
|
282
278
|
...
|
283
279
|
<%= f.actions do %>
|
284
280
|
<%= f.action :submit, :button_html => { :class => "primary", :disable_with => 'Wait...' } %>
|
285
281
|
<% end %>
|
286
282
|
<% end %>
|
287
|
-
|
283
|
+
```
|
288
284
|
|
289
|
-
Customize the HTML attributes for the
|
285
|
+
Customize the HTML attributes for the `<li>` wrapper around every input with the `:wrapper_html` option hash. There's one special key in the hash: (`:class`), which will actually _append_ your string of classes to the existing classes provided by Formtastic (like `"required string error"`).
|
290
286
|
|
291
|
-
|
287
|
+
```erb
|
292
288
|
<%= semantic_form_for @post do |f| %>
|
293
289
|
<%= f.inputs do %>
|
294
290
|
<%= f.input :title, :wrapper_html => { :class => "important" } %>
|
@@ -297,16 +293,19 @@ Customize the HTML attributes for the @<li>@ wrapper around every input with the
|
|
297
293
|
<% end %>
|
298
294
|
...
|
299
295
|
<% end %>
|
300
|
-
|
296
|
+
```
|
301
297
|
|
302
|
-
Many inputs provide a collection of options to choose from (like
|
298
|
+
Many inputs provide a collection of options to choose from (like `:select`, `:radio`, `:check_boxes`, `:boolean`). In many cases, Formtastic can find choices through the model associations, but if you want to use your own set of choices, the `:collection` option is what you want. You can pass in an Array of objects, an array of Strings, a Hash... Throw almost anything at it! Examples:
|
303
299
|
|
304
|
-
|
300
|
+
```ruby
|
305
301
|
f.input :authors, :as => :check_boxes, :collection => User.order("last_name ASC").all
|
306
302
|
f.input :authors, :as => :check_boxes, :collection => current_user.company.users.active
|
307
303
|
f.input :authors, :as => :check_boxes, :collection => [@justin, @kate]
|
308
304
|
f.input :authors, :as => :check_boxes, :collection => ["Justin", "Kate", "Amelia", "Gus", "Meg"]
|
309
305
|
f.input :author, :as => :select, :collection => Author.all
|
306
|
+
f.input :author, :as => :select, :collection => Author.pluck(:first_name, :id)
|
307
|
+
f.input :author, :as => :select, :collection => Author.pluck(Arel.sql("CONCAT(`first_name`, ' ', `last_name`)"), :id)
|
308
|
+
f.input :author, :as => :select, :collection => Author.your_custom_scope_or_class_method
|
310
309
|
f.input :author, :as => :select, :collection => { @justin.name => @justin.id, @kate.name => @kate.id }
|
311
310
|
f.input :author, :as => :select, :collection => ["Justin", "Kate", "Amelia", "Gus", "Meg"]
|
312
311
|
f.input :author, :as => :radio, :collection => User.all
|
@@ -315,57 +314,59 @@ Many inputs provide a collection of options to choose from (like @:select@, @:ra
|
|
315
314
|
f.input :author, :as => :radio, :collection => ["Justin", "Kate", "Amelia", "Gus", "Meg"]
|
316
315
|
f.input :admin, :as => :radio, :collection => ["Yes!", "No"]
|
317
316
|
f.input :book_id, :as => :select, :collection => Hash[Book.all.map{|b| [b.name,b.id]}]
|
318
|
-
|
317
|
+
f.input :fav_book,:as => :datalist , :collection => Book.pluck(:name)
|
318
|
+
```
|
319
319
|
|
320
320
|
|
321
|
-
|
321
|
+
## The Available Inputs
|
322
322
|
|
323
323
|
The Formtastic input types:
|
324
324
|
|
325
|
-
*
|
326
|
-
*
|
327
|
-
*
|
328
|
-
*
|
329
|
-
*
|
330
|
-
*
|
331
|
-
*
|
332
|
-
*
|
333
|
-
*
|
334
|
-
*
|
335
|
-
*
|
336
|
-
*
|
337
|
-
*
|
338
|
-
*
|
339
|
-
*
|
340
|
-
*
|
341
|
-
*
|
342
|
-
*
|
343
|
-
*
|
344
|
-
*
|
325
|
+
* `:select` - a select menu. Default for ActiveRecord associations: `belongs_to`, `has_many`, and `has_and_belongs_to_many`.
|
326
|
+
* `:check_boxes` - a set of check_box inputs. Alternative to `:select` for ActiveRecord-associations: `has_many`, and has_and_belongs_to_many`.
|
327
|
+
* `:radio` - a set of radio inputs. Alternative to `:select` for ActiveRecord-associations: `belongs_to`.
|
328
|
+
* `:time_zone` - a select input. Default for column types: `:string` with name matching `"time_zone"`.
|
329
|
+
* `:password` - a password input. Default for column types: `:string` with name matching `"password"`.
|
330
|
+
* `:text` - a textarea. Default for column types: `:text`.
|
331
|
+
* `:date_select` - a date select. Default for column types: `:date`.
|
332
|
+
* `:datetime_select` - a date and time select. Default for column types: `:datetime` and `:timestamp`.
|
333
|
+
* `:time_select` - a time select. Default for column types: `:time`.
|
334
|
+
* `:boolean` - a checkbox. Default for column types: `:boolean`.
|
335
|
+
* `:string` - a text field. Default for column types: `:string`.
|
336
|
+
* `:number` - a text field (just like string). Default for column types: `:integer`, `:float`, and `:decimal`.
|
337
|
+
* `:file` - a file field. Default for file-attachment attributes matching: [paperclip](https://github.com/thoughtbot/paperclip) or [attachment_fu](https://github.com/technoweenie/attachment_fu).
|
338
|
+
* `:country` - a select menu of country names. Default for column types: `:string` with name `"country"` - requires a *country_select* plugin to be installed.
|
339
|
+
* `:email` - a text field (just like string). Default for columns with name matching `"email"`. New in HTML5. Works on some mobile browsers already.
|
340
|
+
* `:url` - a text field (just like string). Default for columns with name matching `"url"`. New in HTML5. Works on some mobile browsers already.
|
341
|
+
* `:phone` - a text field (just like string). Default for columns with name matching `"phone"` or `"fax"`. New in HTML5.
|
342
|
+
* `:search` - a text field (just like string). Default for columns with name matching `"search"`. New in HTML5. Works on Safari.
|
343
|
+
* `:hidden` - a hidden field. Creates a hidden field (added for compatibility).
|
344
|
+
* `:range` - a slider field.
|
345
|
+
* `:datalist` - a text field with a accompanying [datalist tag](https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist) which provides options for autocompletion
|
345
346
|
|
346
347
|
The comments in the code are pretty good for each of these (what it does, what the output is, what the options are, etc.) so go check it out.
|
347
348
|
|
348
349
|
|
349
|
-
|
350
|
+
## Delegation for label lookups
|
350
351
|
|
351
352
|
Formtastic decides which label to use in the following order:
|
352
353
|
|
353
|
-
|
354
|
+
```
|
354
355
|
1. :label # :label => "Choose Title"
|
355
356
|
2. Formtastic i18n # if either :label => true || i18n_lookups_by_default = true (see Internationalization)
|
356
357
|
3. Activerecord i18n # if localization file found for the given attribute
|
357
358
|
4. label_str_method # if nothing provided this defaults to :humanize but can be set to a custom method
|
358
|
-
|
359
|
+
```
|
359
360
|
|
360
|
-
|
361
|
+
## Internationalization (I18n)
|
361
362
|
|
362
|
-
|
363
|
+
### Basic Localization
|
363
364
|
|
364
|
-
Formtastic has some neat I18n-features. ActiveRecord object names and attributes are, by default, taken from calling
|
365
|
+
Formtastic has some neat I18n-features. ActiveRecord object names and attributes are, by default, taken from calling `@object.human_name` and `@object.human_attribute_name(attr)` respectively. There are a few words specific to Formtastic that can be translated. See `lib/locale/en.yml` for more information.
|
365
366
|
|
366
367
|
Basic localization (labels only, with ActiveRecord):
|
367
368
|
|
368
|
-
|
369
|
+
```erb
|
369
370
|
<%= semantic_form_for @post do |f| %>
|
370
371
|
<%= f.inputs do %>
|
371
372
|
<%= f.input :title %> # => :label => I18n.t('activerecord.attributes.user.title') or 'Title'
|
@@ -373,23 +374,23 @@ Basic localization (labels only, with ActiveRecord):
|
|
373
374
|
<%= f.input :section %> # => :label => I18n.t('activerecord.attributes.user.section') or 'Section'
|
374
375
|
<% end %>
|
375
376
|
<% end %>
|
376
|
-
|
377
|
+
```
|
377
378
|
|
378
379
|
*Note:* This is perfectly fine if you just want your labels/attributes and/or models to be translated using *ActiveRecord I18n attribute translations*, and you don't use input hints and legends. But what if you do? And what if you don't want same labels in all forms?
|
379
380
|
|
380
|
-
|
381
|
+
### Enhanced Localization (Formtastic I18n API)
|
381
382
|
|
382
383
|
Formtastic supports localized *labels*, *hints*, *legends*, *actions* using the I18n API for more advanced usage. Your forms can now be DRYer and more flexible than ever, and still fully localized. This is how:
|
383
384
|
|
384
|
-
*1. Enable I18n lookups by default (
|
385
|
+
*1. Enable I18n lookups by default (`config/initializers/formtastic.rb`):*
|
385
386
|
|
386
|
-
|
387
|
+
```ruby
|
387
388
|
Formtastic::FormBuilder.i18n_lookups_by_default = true
|
388
|
-
|
389
|
+
```
|
389
390
|
|
390
|
-
*2. Add some label-translations/variants (
|
391
|
+
*2. Add some label-translations/variants (`config/locales/en.yml`):*
|
391
392
|
|
392
|
-
|
393
|
+
```yml
|
393
394
|
en:
|
394
395
|
formtastic:
|
395
396
|
titles:
|
@@ -416,11 +417,11 @@ Formtastic supports localized *labels*, *hints*, *legends*, *actions* using the
|
|
416
417
|
reset: "Reset form"
|
417
418
|
cancel: "Cancel and go back"
|
418
419
|
dummie: "Launch!"
|
419
|
-
|
420
|
+
```
|
420
421
|
|
421
422
|
*3. ...and now you'll get:*
|
422
423
|
|
423
|
-
|
424
|
+
```erb
|
424
425
|
<%= semantic_form_for Post.new do |f| %>
|
425
426
|
<%= f.inputs do %>
|
426
427
|
<%= f.input :title %> # => :label => "Choose a title...", :hint => "Choose a good title for your post."
|
@@ -431,24 +432,24 @@ Formtastic supports localized *labels*, *hints*, *legends*, *actions* using the
|
|
431
432
|
<%= f.action :submit %> # => "Create my %{model}"
|
432
433
|
<% end %>
|
433
434
|
<% end %>
|
434
|
-
|
435
|
+
```
|
435
436
|
|
436
437
|
*4. Localized titles (a.k.a. legends):*
|
437
438
|
|
438
439
|
_Note: Slightly different because Formtastic can't guess how you group fields in a form. Legend text can be set with first (as in the sample below) specified value, or :name/:title options - depending on what flavor is preferred._
|
439
440
|
|
440
|
-
|
441
|
+
```erb
|
441
442
|
<%= semantic_form_for @post do |f| %>
|
442
443
|
<%= f.inputs :post_details do %> # => :title => "Post details"
|
443
444
|
# ...
|
444
445
|
<% end %>
|
445
446
|
# ...
|
446
447
|
<% end %>
|
447
|
-
|
448
|
+
```
|
448
449
|
|
449
450
|
*5. Override I18n settings:*
|
450
451
|
|
451
|
-
|
452
|
+
```erb
|
452
453
|
<%= semantic_form_for @post do |f| %>
|
453
454
|
<%= f.inputs do %>
|
454
455
|
<%= f.input :title %> # => :label => "Choose a title...", :hint => "Choose a good title for your post."
|
@@ -459,17 +460,17 @@ _Note: Slightly different because Formtastic can't guess how you group fields in
|
|
459
460
|
<%= f.action :submit, :label => :dummie %> # => "Launch!"
|
460
461
|
<% end %>
|
461
462
|
<% end %>
|
462
|
-
|
463
|
+
```
|
463
464
|
|
464
465
|
If I18n-lookups is disabled, i.e.:
|
465
466
|
|
466
|
-
|
467
|
+
```ruby
|
467
468
|
Formtastic::FormBuilder.i18n_lookups_by_default = false
|
468
|
-
|
469
|
+
```
|
469
470
|
|
470
471
|
...then you can enable I18n within the forms instead:
|
471
472
|
|
472
|
-
|
473
|
+
```erb
|
473
474
|
<%= semantic_form_for @post do |f| %>
|
474
475
|
<%= f.inputs do %>
|
475
476
|
<%= f.input :title, :label => true %> # => :label => "Choose a title..."
|
@@ -480,25 +481,25 @@ If I18n-lookups is disabled, i.e.:
|
|
480
481
|
<%= f.action :submit, :label => true %> # => "Update %{model}" (if we are in edit that is...)
|
481
482
|
<% end %>
|
482
483
|
<% end %>
|
483
|
-
|
484
|
+
```
|
484
485
|
|
485
486
|
*6. Advanced I18n lookups*
|
486
487
|
|
487
488
|
For more flexible forms; Formtastic finds translations using a bottom-up approach taking the following variables in account:
|
488
489
|
|
489
|
-
*
|
490
|
-
*
|
491
|
-
*
|
490
|
+
* `MODEL`, e.g. "post"
|
491
|
+
* `ACTION`, e.g. "edit"
|
492
|
+
* `KEY/ATTRIBUTE`, e.g. "title", :my_custom_key, ...
|
492
493
|
|
493
494
|
...in the following order:
|
494
495
|
|
495
|
-
1.
|
496
|
-
2.
|
497
|
-
3.
|
496
|
+
1. `formtastic.{titles,labels,hints,actions}.MODEL.ACTION.ATTRIBUTE` - by model and action
|
497
|
+
2. `formtastic.{titles,labels,hints,actions}.MODEL.ATTRIBUTE` - by model
|
498
|
+
3. `formtastic.{titles,labels,hints,actions}.ATTRIBUTE` - global default
|
498
499
|
|
499
500
|
...which means that you can define translations like this:
|
500
501
|
|
501
|
-
|
502
|
+
```yml
|
502
503
|
en:
|
503
504
|
formtastic:
|
504
505
|
labels:
|
@@ -512,98 +513,120 @@ For more flexible forms; Formtastic finds translations using a bottom-up approac
|
|
512
513
|
edit:
|
513
514
|
title: "Edit title"
|
514
515
|
body: "Edit body"
|
515
|
-
|
516
|
+
```
|
516
517
|
|
517
|
-
Values for
|
518
|
+
Values for `labels`/`hints`/`actions` are can take values: `String` (explicit value), `Symbol` (i18n-lookup-key relative to the current "type", e.g. actions:), `true` (force I18n lookup), `false` (force no I18n lookup). Titles (legends) can only take: `String` and `Symbol` - true/false have no meaning.
|
518
519
|
|
520
|
+
*7. Basic Translations*
|
521
|
+
If you want some basic translations, take a look on the [formtastic_i18n gem](https://github.com/timoschilling/formtastic_i18n).
|
519
522
|
|
520
|
-
|
523
|
+
## Semantic errors
|
521
524
|
|
522
525
|
You can show errors on base (by default) and any other attribute just by passing its name to the semantic_errors method:
|
523
526
|
|
524
|
-
|
527
|
+
```erb
|
525
528
|
<%= semantic_form_for @post do |f| %>
|
526
529
|
<%= f.semantic_errors :state %>
|
527
530
|
<% end %>
|
528
|
-
|
531
|
+
```
|
529
532
|
|
530
533
|
|
531
|
-
|
534
|
+
## Modified & Custom Inputs
|
532
535
|
|
533
536
|
You can modify existing inputs, subclass them, or create your own from scratch. Here's the basic process:
|
534
537
|
|
535
|
-
*
|
536
|
-
*
|
537
|
-
* To use that input, leave off the word "input" in your @as@ statement. For example, @f.input(:size, :as => :hat_size)@
|
538
|
+
* Run the input generator and provide your custom input name. For example, `rails generate formtastic:input hat_size`. This creates the file `app/inputs/hat_size_input.rb`. You can also provide namespace to input name like `rails generate formtastic:input foo/custom` or `rails generate formtastic:input Foo::Custom`, this will create the file `app/inputs/foo/custom_input.rb` in both cases.
|
539
|
+
* To use that input, leave off the word "input" in your `as` statement. For example, `f.input(:size, :as => :hat_size)`
|
538
540
|
|
539
541
|
Specific examples follow.
|
540
542
|
|
541
|
-
|
543
|
+
### Changing Existing Input Behavior
|
542
544
|
|
543
|
-
To modify the behavior of
|
545
|
+
To modify the behavior of `StringInput`, subclass it in a new file, `app/inputs/string_input.rb`:
|
544
546
|
|
545
|
-
|
547
|
+
```ruby
|
546
548
|
class StringInput < Formtastic::Inputs::StringInput
|
547
549
|
def to_html
|
548
550
|
puts "this is my modified version of StringInput"
|
549
551
|
super
|
550
552
|
end
|
551
553
|
end
|
552
|
-
|
554
|
+
```
|
553
555
|
|
554
|
-
|
556
|
+
Another way to modify behavior is by using the input generator:
|
557
|
+
```shell
|
558
|
+
$ rails generate formtastic:input string --extend
|
559
|
+
```
|
555
560
|
|
556
|
-
|
561
|
+
This generates the file `app/inputs/string_input.rb` with its respective content class.
|
557
562
|
|
558
|
-
|
563
|
+
You can use your modified version with `:as => :string`.
|
559
564
|
|
560
|
-
|
565
|
+
### Creating New Inputs Based on Existing Ones
|
566
|
+
|
567
|
+
To create your own new types of inputs based on existing inputs, the process is similar. For example, to create `FlexibleTextInput` based on `StringInput`, put the following in `app/inputs/flexible_text_input.rb`:
|
568
|
+
|
569
|
+
```ruby
|
561
570
|
class FlexibleTextInput < Formtastic::Inputs::StringInput
|
562
571
|
def input_html_options
|
563
572
|
super.merge(:class => "flexible-text-area")
|
564
573
|
end
|
574
|
+
|
575
|
+
def options
|
576
|
+
super.merge(hint: 'This is a flexible text area')
|
577
|
+
end
|
565
578
|
end
|
566
|
-
|
579
|
+
```
|
580
|
+
|
581
|
+
You can also extend existing input behavior by using the input generator:
|
582
|
+
|
583
|
+
```shell
|
584
|
+
$ rails generate formtastic:input FlexibleText --extend string
|
585
|
+
```
|
567
586
|
|
568
|
-
|
587
|
+
This generates the file `app/inputs/flexible_text_input.rb` with its respective content class.
|
569
588
|
|
570
|
-
|
589
|
+
You can use your new input with `:as => :flexible_text`.
|
571
590
|
|
572
|
-
|
591
|
+
### Creating New Inputs From Scratch
|
573
592
|
|
574
|
-
|
593
|
+
To create a custom `DatePickerInput` from scratch, put the following in `app/inputs/date_picker_input.rb`:
|
594
|
+
|
595
|
+
```ruby
|
575
596
|
class DatePickerInput
|
576
597
|
include Formtastic::Inputs::Base
|
577
598
|
def to_html
|
578
599
|
# ...
|
579
600
|
end
|
580
601
|
end
|
581
|
-
|
602
|
+
```
|
582
603
|
|
583
|
-
You can use your new input with
|
604
|
+
You can use your new input with `:as => :date_picker`.
|
584
605
|
|
585
606
|
|
586
|
-
|
607
|
+
## Dependencies
|
587
608
|
|
588
609
|
There are none other than Rails itself, but...
|
589
610
|
|
590
|
-
* If you want to use the
|
611
|
+
* If you want to use the `:country` input, you'll need to install the [country-select plugin](https://github.com/stefanpenner/country_select) (or any other country_select plugin with the same API). Both 1.x and 2.x are supported, but they behave differently when storing data, so please see their [upgrade notes](https://github.com/stefanpenner/country_select/blob/master/UPGRADING.md) if switching from 1.x.
|
591
612
|
* There are a bunch of development dependencies if you plan to contribute to Formtastic
|
592
613
|
|
593
614
|
|
594
|
-
|
615
|
+
## How to contribute
|
595
616
|
|
596
617
|
* Fork the project on Github
|
618
|
+
* Install development dependencies (`bundle install` and `bin/appraisal install`)
|
597
619
|
* Create a topic branch for your changes
|
598
620
|
* Ensure that you provide *documentation* and *test coverage* for your changes (patches won't be accepted without)
|
599
621
|
* Ensure that all tests pass (`bundle exec rake`)
|
600
622
|
* Create a pull request on Github (these are also a great place to start a conversation around a patch as early as possible)
|
601
623
|
|
602
624
|
|
603
|
-
|
625
|
+
## Project Info
|
626
|
+
|
627
|
+
Formtastic was created by [Justin French](https://www.justinfrench.com) with contributions from around 180 awesome developers. Run `git shortlog -n -s` to see the awesome.
|
604
628
|
|
605
|
-
|
629
|
+
The project is hosted on Github: [https://github.com/formtastic/formtastic](https://github.com/formtastic/formtastic), where your contributions, forkings, comments, issues and feedback are greatly welcomed.
|
606
630
|
|
607
|
-
|
631
|
+
Copyright (c) 2007-2021, released under the MIT license.
|
608
632
|
|
609
|
-
Copyright (c) 2007-2014 Justin French, released under the MIT license.
|