You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Move validation errors for check boxes and radio buttons into last div.form-check. (#448)
* Test from 419-check-radio-errors.
* Tests from 419-check-radio-errors-b and 419-check-radio-errors-c.
* Plain check_box working.
* radio_button error_message.
* Collections radios and checks working.
* Correct options to Rails helper.
* Upgrade doc first draft.
* Fix tests and code for file and date/time selects.
* Update CHANGELOG.
* Remove commented-out test
This test case was removed as it was something that's too difficult to
support with Bootstrap 4.
test 'form_group renders the "error" class and message corrrectly when object is invalid' do
@user.email = nil
assert @user.invalid?
output = @builder.form_group :email do
%{<p class="form-control-static">Bar</p>}.html_safe
end
expected = <<-HTML.strip_heredoc
<div class="form-group">
<p class="form-control-static">Bar</p>
<div class="invalid-feedback">can't be blank, is too short (minimum is 5 characters)</div>
</div>
HTML
assert_equivalent_xml expected, output
end
In its place, we've recommended a workaround in the UPGRADE-4.0 doc,
which is to output the error message manually. This workaround has a
corresponding test to verify its correctness.
* Error message must be sibling of input
Copy file name to clipboardExpand all lines: CHANGELOG.md
+4-1Lines changed: 4 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,9 +18,11 @@ In addition to these necessary markup changes, the bootstrap_form API itself has
18
18
*`hide_label: true` and `skip_label: true` on individual check boxes and radio buttons apply Bootstrap 4 markup. This means the appearance of a page may change if you're upgrading from the Bootstrap 3 version of `bootstrap_form`, and you used `check_box` or `radio_button` with either of those options
19
19
*`static_control` will no longer properly show error messages. This is the result of bootstrap changes.
20
20
*`static_control` will also no longer accept a block, use the `value` option instead.
21
-
* Your contribution here!
21
+
*`form_group` with a block that produces arbitrary text needs to be modified to produce validation error messages (see the UPGRADE-4.0 document). [@lcreid](https://github.com/lcreid).
22
+
*`form_group` with a block that contains more than one `check_box` or `radio_button` needs to be modified to produce validation error messages (see the UPGRADE-4.0 document). [@lcreid](https://github.com/lcreid).
22
23
*[#456](https://github.com/bootstrap-ruby/bootstrap_form/pull/456): Fix label `for` attribute when passing non-english characters using `collection_check_boxes` - [@ug0](https://github.com/ug0).
23
24
*[#449](https://github.com/bootstrap-ruby/bootstrap_form/pull/449): Bootstrap 4 no longer mixes in `.row` in `.form-group`. `bootstrap_form` adds `.row` to `div.form-group` when layout is horizontal.
25
+
* Your contribution here!
24
26
25
27
### New features
26
28
@@ -32,6 +34,7 @@ In addition to these necessary markup changes, the bootstrap_form API itself has
32
34
* Adds support for `label_as_placeholder` option, which will set the label text as an input fields placeholder (and hiding the label for sr_only).
33
35
*[#449](https://github.com/bootstrap-ruby/bootstrap_form/pull/449): Passing `.form-row` overrides default `.form-group.row` in horizontal layouts.
34
36
* Added an option to the `submit` (and `primary`, by transitivity) form tag helper, `render_as_button`, which when truthy makes the submit button render as a button instead of an input. This allows you to easily provide further styling to your form submission buttons, without requiring you to reinvent the wheel and use the `button` helper (and having to manually insert the typical Bootstrap classes). - [@jsaraiva](https://github.com/jsaraiva).
37
+
* Add `:error_message` option to `check_box` and `radio_button`, so they can output validation error messages if needed. [@lcreid](https://github.com/lcreid).
Copy file name to clipboardExpand all lines: UPGRADE-4.0.md
+60-1Lines changed: 60 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,3 +1,63 @@
1
+
# Upgrading to `bootstrap_form` 4.0
2
+
We made every effort to make the upgrade from `bootstrap_form` v2.7 (Bootstrap 3) to `bootstrap_form` v4.0 (Bootstrap 4) as easy as possible. However, Bootstrap 4 is fundamentally different from Bootstrap 3, so some changes may be necessary in your code.
3
+
4
+
## Bootstrap 4 Changes
5
+
If you made use of Bootstrap classes or Javascript, you should read the [Bootstrap 4 migration guide](https://getbootstrap.com/docs/4.0/migration/).
6
+
7
+
## Validation Error Messages
8
+
With Bootstrap 4, in order for validation error messages to display, the message has to be a sibling of the `input` tag, and the `input` tag has to have the `.is-invalid` class. This was different from Bootstrap 3, and forced some changes to `bootstrap_form` that may affect programs that used `bootstrap_form` v2.7.
9
+
10
+
### Arbitrary Text in `form_group` Blocks
11
+
In `bootstrap_form` v2.7, it was possible to write something like this:
12
+
```
13
+
<%= bootstrap_form_for(@user) do |f| %>
14
+
<%= f.form_group(:email) do %>
15
+
<p class="form-control-static">Bar</p>
16
+
<%= end %>
17
+
<%= end %>
18
+
```
19
+
and, if `@user.email` had validation errors, it would render:
20
+
```
21
+
<div class="form-group has-error">
22
+
<p class="form-control-static">Bar</p>
23
+
<span class="help-block">can't be blank, is too short (minimum is 5 characters)</span>
24
+
</div>
25
+
```
26
+
which would show an error message in red.
27
+
28
+
That doesn't work in Bootstrap 4. Outputting error messages had to be moved to accommodate other changes, so `form_group` no longer outputs error messages unless whatever is inside the block is a `bootstrap_form` helper.
29
+
30
+
One way to make the above behave the same in `bootstrap_form` v4.0 is to write it like this:
Bootstrap 4 marks up check boxes and radio buttons differently. In particular, Bootstrap 4 wraps the `input` and `label` tags in a `div.form-check` tag. Because validation error messages have to be siblings of the `input` tag, there is now an `error_message` option to `check_box` and `radio_button` to cause them to put the validation error messages inside the `div.form-check`.
43
+
44
+
This change is mostly invisible to existing programs:
45
+
46
+
- Since the default for `error_message` is false, use of `check_box` and `radio_button` all by themselves behaves the same as in `bootstrap_form` v2.7
47
+
- All the `collection*` helpers that output radio buttons and check boxes arrange to produce the validation error message on the last check box or radio button of the group, like `bootstrap_form` v2.7 did
48
+
49
+
There is one situation where an existing program will have to change. When rendering one or more check boxes or radio buttons inside a `form_group` block, the last call to `check_box` or `radio_button` in the block will have to have `error_message: true` added to its parameters, like this:
In Bootstrap 3, `.form-group` mixed in `.row`. In Bootstrap 4, it doesn't. So `bootstrap_form` automatically adds `.row` to the `div.form-group`s that it creates, if the form group is in a horizontal layout. When migrating forms from the Bootstrap 3 version of `bootstrap_form` to the Bootstrap 4 version, check all horizontal forms to be sure they're being rendered properly.
3
63
@@ -17,4 +77,3 @@ bootstrap_form_for(@user, layout: "horizontal") do |f|
0 commit comments