Skip to content

Support for Rails 5.1 form_with #346

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
lcreid wants to merge 20 commits into from
Closed

Support for Rails 5.1 form_with #346

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
4255abb
has-error is now has-danger
desheikh Nov 8, 2016
d8c3c1d
inputs with errors should have form-control-feedback
desheikh Nov 8, 2016
04388cf
control-label is now form-control-label
desheikh Nov 8, 2016
47e90fa
btn-default is now btn-secondary
desheikh Nov 8, 2016
2fe6f28
form-horizontal is no longer a required class
desheikh Nov 8, 2016
fd2dc57
input field should have form-control-danger on error
desheikh Nov 8, 2016
77ed9ff
checkbox is now form-check
desheikh Nov 8, 2016
edac96a
checkbox input should have form-check-input
desheikh Nov 8, 2016
7d4043e
non inline checkbox labels should have form-check-label
desheikh Nov 8, 2016
16d82d6
Support :prepend and :append for the `select` helper (#327)
donv Apr 24, 2017
4c83ea2
Merge remote-tracking branch 'upstream/master' into bootstrap-4-rails…
lcreid Aug 28, 2017
5d4dec3
`form_with` mostly working.
lcreid Aug 28, 2017
41e1c79
Make it parse under Ruby 1.9.2
lcreid Sep 14, 2017
7fbe027
Try another way to fix Ruby 1.9.2 parse problem.
lcreid Sep 14, 2017
ace7723
Try Ruby 1.9.2 syntax yet again.
lcreid Sep 14, 2017
33ea133
Close, but going to try keying on Rails ID generation.
lcreid Sep 21, 2017
ce707de
Using the underlying option for id generation works.
lcreid Sep 21, 2017
9a45e86
Use fields instead of fields_for.
lcreid Sep 21, 2017
f9ebdec
Finally remove FormBuilderFormWith.
lcreid Sep 21, 2017
efd1122
Remove some unnecessary diffs.
lcreid Oct 7, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ Bugfixes:

Features:
- Your contribution here!
* Support for Rails 5.1 `form_with`.
* [#325](https://github.com/bootstrap-ruby/rails-bootstrap-forms/pull/325): Support :prepend and :append for the `select` helper - [@donv](https://github.com/donv).


## [2.7.0][] (2017-04-21)

Expand Down
177 changes: 166 additions & 11 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ twitter bootstrap-style forms into your rails application.
## Requirements

* Ruby 1.9+
* Rails 4.0+
* Rails 4.0+ (Rails 5.1+ for `bootstrap_form_with`)
* Twitter Bootstrap 3.0+

## Installation
Expand All @@ -32,6 +32,161 @@ Then require the CSS in your `application.css` file:

## Usage

### Rails >= 5.1

To get started, just use the `bootstrap_form_with` helper
in place of `form_with`. Here's an example:

```erb
<%= bootstrap_form_with(model: @user, local: true) do |f| %>
<%= f.email_field :email %>
<%= f.password_field :password %>
<%= f.check_box :remember_me %>
<%= f.submit "Log In" %>
<% end %>
```

This generates:

```html
<form role="form" action="/users" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="&#x2713;" />
<div class="form-group">
<label class="form-control-label required">Email</label>
<input class="form-control" type="email" value="steve@example.com" name="user[email]" />
</div>
<div class="form-group">
<label class="form-control-label">Password</label>
<input class="form-control" type="password" name="user[password]" />
<span class="form-text text-muted">A good password should be at least six characters long</span>
</div>
<div class="form-check">
<label class="form-check-label">
<input name="user[remember_me]" type="hidden" value="0" />
<input class="form-check-input" type="checkbox" value="1" name="user[remember_me]" /> Remember menu
</label>
</div>
<input type="submit" name="commit" value="Log In" class="btn btn-secondary" data-disable-with="Log In" />
</form>
```

If your form is not backed by a model, use `bootstrap_form_with` like this:

```erb
<%= bootstrap_form_with url: '/subscribe', local: true do |f| %>
<%= f.email_field :email, value: 'name@example.com' %>
<%= f.submit %>
<% end %>
```

```html
<form role="form" action="/subscribe" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="&#x2713;" />
<div class="form-group">
<label class="form-control-label">Email</label>
<input value="name@example.com" class="form-control" type="email" name="email" />
</div>
<input type="submit" name="commit" value="Save " class="btn btn-secondary" data-disable-with="Save " />
</form>
```

#### Important Differences Between `form_with` and `form_for`

Rails 5.1 introduced `form_with`,
which unifies the functionality previously found in `form_for` and `form_tag`.
`form_for` and `form_tag` will be deprecated in a future version of Rails,
so new applications should use `bootstrap_form_with`.

`form_with` is different compared to `form_for` and `form_tag`.
`bootstrap_form_width` basically just wraps `form_with`
and adds some functionality,
and so the different behaviour of `form_with`
is refelected in `bootstrap_form_with`
compared to `bootstrap_form_for`
and `bootstrap_form_tag`.

##### Ajax by Default
`form_with` defaults to submitting forms via Javascript XHR calls,
like `form_for` or `form_tag` would do if you specified `remote: true`.
If you want the browser to submit the request
the same way `form_for` and `form_tag` would do by default,
you need to specify `local: true` as an option to `form_with`.

##### No Default DOM IDs
When used with the builder (variable) yielded by `form_with`,
the Rails field helpers do not generate a default DOM id.
Because `bootstrap_form_width` just wraps and adds some functionality
to `form_with`,
the `bootstrap_form` field helpers also do not generate a default DOM id.
This should not affect your application,
but it might affect automated testing if you're using Capybara or similar tools,
if you wrote actions or tests that selected on the DOM id of an element.

There is a Rails [pull request](https://github.com/rails/rails/pull/29439)
to enable the `skip_default_ids: false` option to reproduce
the old default DOM id behaviour in `form_with`.
This option will be supported by `bootstrap_form_with`
if/when the PR is merged into Rails.

You can also specify the id explicitly in most cases:

```erb
<%= bootstrap_form_with(model: @user, local: true) do |f| %>
<%= f.email_field :email %>
<%= f.password_field :password, id: :password %>
<%= f.check_box :remember_me, id: :remember %>
<%= f.submit "Log In" %>
<% end %>
```

generates:

```html
<form role="form" action="/users" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="&#x2713;" />
<div class="form-group">
<label class="form-control-label required">Email</label>
<input class="form-control" type="email" value="steve@example.com" name="user[email]" />
</div>
<div class="form-group">
<label class="form-control-label" for="password">Password</label>
<input id="password" class="form-control" type="password" name="user[password]" />
<span class="form-text text-muted">A good password should be at least six characters long</span>
</div>
<div class="form-check"><label for="remember" class="form-check-label">
<input name="user[remember_me]" type="hidden" value="0" />
<input id="remember" class="form-check-input" type="checkbox" value="1" name="user[remember_me]" /> Remember me</label>
</div>
<input type="submit" name="commit" value="Log In" class="btn btn-secondary" data-disable-with="Log In" />
</form>
```

The current exception to specifying an id are for the "collection" helpers.
Because they generate multiple elements that require multiple ids,
you need to rely on the default id generation.

Another result of the lack of default DOM ids
is that text fields AND OTHERS TBD
are no longer linked to their label.
This should not affect your application,
but it might affect automated testing using Capybara or similar tools,
if you wrote actions or tests that selected on the DOM id of an element.

##### User `fields` Instead Of `fields_for` In Nested Forms
For nested forms, use `fields` instead of `fields_for`.

##### No Default Classes
Finally, `bootstrap_form_with` doesn't attach a default class
to the form.
If you attached styling to the DOM class that `form_for` added to the form element,
you'll have to add your own code to attach the appropriate class.

#### Nested Forms with `bootstrap_form_with`

This hasn't been tested yet.

### Rails < 5.1

To get started, just use the `bootstrap_form_for` helper. Here's an example:

```erb
Expand All @@ -55,13 +210,13 @@ This generates the following HTML:
<label for="user_password">Password</label>
<input class="form-control" id="user_password" name="user[password]" type="password">
</div>
<div class="checkbox">
<div class="form-check">
<label for="user_remember_me">
<input name="user[remember_me]" type="hidden" value="0">
<input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> Remember me
</label>
</div>
<input class="btn btn-default" name="commit" type="submit" value="Log In">
<input class="btn btn-secondary" name="commit" type="submit" value="Log In">
</form>
```

Expand Down Expand Up @@ -209,7 +364,7 @@ This automatically adds the `has-feedback` class to the `form-group`:

```html
<div class="form-group has-feedback">
<label class="control-label" for="user_login">Login</label>
<label class="form-control-label" for="user_login">Login</label>
<input class="form-control" id="user_login" name="user[login]" type="text" />
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
Expand All @@ -227,7 +382,7 @@ You can also prepend and append buttons. Note: The buttons must contain the
`btn` class to generate the correct markup.

```erb
<%= f.text_field :search, append: link_to("Go", "#", class: "btn btn-default") %>
<%= f.text_field :search, append: link_to("Go", "#", class: "btn btn-secondary") %>
```

To add a class to the input group wrapper, use `:input_group_class` option.
Expand All @@ -249,7 +404,7 @@ Which produces the following output:

```erb
<div class="form-group has-warning" data-foo="bar">
<label class="control-label" for="user_name">Id</label>
<label class="form-control-label" for="user_name">Id</label>
<input class="form-control" id="user_name" name="user[name]" type="text">
</div>
```
Expand Down Expand Up @@ -330,7 +485,7 @@ Here's the output:

```html
<div class="form-group">
<label class="col-sm-2 control-label" for="user_email">Email</label>
<label class="col-sm-2 form-control-label" for="user_email">Email</label>
<div class="col-sm-10">
<p class="form-control-static">test@email.com</p>
</div>
Expand All @@ -355,7 +510,7 @@ this defining these selects as `inline-block` and a width of `auto`.

### Submit Buttons

The `btn btn-default` css classes are automatically added to your submit
The `btn btn-secondary` css classes are automatically added to your submit
buttons.

```erb
Expand Down Expand Up @@ -468,10 +623,10 @@ error will be displayed below the field. Rails normally wraps the fields in a
div (field_with_errors), but this behavior is suppressed. Here's an example:

```html
<div class="form-group has-error">
<label class="control-label" for="user_email">Email</label>
<div class="form-group has-danger">
<label class="form-control-label" for="user_email">Email</label>
<input class="form-control" id="user_email" name="user[email]" type="email" value="">
<span class="help-block">can't be blank</span>
<span class="form-control-feedback">can't be blank</span>
</div>
```

Expand Down
Loading