Skip to content

Commit 728641f

Browse files
smithdc1smithdc1
committed
Vertical forms
1 parent 32701b1 commit 728641f

File tree

12 files changed

+74
-106
lines changed

12 files changed

+74
-106
lines changed

‎rest_framework/templates/rest_framework/vertical/checkbox.html

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
1-
<div class="mb-3 {% if field.errors %}has-error{% endif %}">
2-
<div class="checkbox">
3-
<label>
4-
<input type="checkbox" name="{{ field.name }}" value="true" {% if field.value %}checked{% endif %}>
5-
{% if field.label %}{{ field.label }}{% endif %}
6-
</label>
7-
</div>
1+
<div class="mb-3">
2+
<div class="form-check">
3+
<input class="form-check-input{% if field.errors %} is-invalid{% endif %}" type="checkbox" name="{{ field.name }}" value="true" {% if field.value %}checked{% endif %}>
4+
{% if field.label %}<label class="form-check-label">{{ field.label }}</label>{% endif %}
85

96
{% if field.errors %}
107
{% for error in field.errors %}
11-
<span class="help-block">{{ error }}</span>
8+
<span class="invalid-feedback">{{ error }}</span>
129
{% endfor %}
1310
{% endif %}
1411

1512
{% if field.help_text %}
16-
<span class="help-block">{{ field.help_text|safe }}</span>
13+
<span class="form-text">{{ field.help_text|safe }}</span>
1714
{% endif %}
15+
</div>
1816
</div>

‎rest_framework/templates/rest_framework/vertical/checkbox_multiple.html

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,30 @@
11
{% load rest_framework %}
22

3-
<div class="mb-3 {% if field.errors %}has-error{% endif %}">
3+
<div class="mb-3">
44
{% if field.label %}
5-
<label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
5+
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
66
{% endif %}
77

8-
{% if style.inline %}
9-
<div>
10-
{% for key, text in field.choices|items %}
11-
<label class="checkbox-inline">
12-
<input type="checkbox" name="{{ field.name }}" value="{{ key }}" {% if key|as_string in field.value|as_list_of_strings %}checked{% endif %}>
13-
{{ text }}
14-
</label>
15-
{% endfor %}
16-
</div>
17-
{% else %}
8+
<div>
189
{% for key, text in field.choices|items %}
19-
<div class="checkbox">
20-
<label>
21-
<input type="checkbox" name="{{ field.name }}" value="{{ key }}" {% if key|as_string in field.value|as_list_of_strings %}checked{% endif %}>
22-
{{ text }}
23-
</label>
10+
<div class="form-check {% if style.inline %}form-check-inline{% endif %}">
11+
<input class="form-check-input{% if field.errors %} is-invalid{% endif %}" type="checkbox" name="{{ field.name }}" value="{{ key }}" {% if key|as_string in field.value|as_list_of_strings %}checked{% endif %}>
12+
<label class="form-check-label">{{ text }}</label>
2413
</div>
2514
{% endfor %}
26-
{% endif %}
2715

28-
{% if field.errors %}
29-
{% for error in field.errors %}
30-
<span class="help-block">{{ error }}</span>
31-
{% endfor %}
32-
{% endif %}
16+
{% if field.errors %}
17+
{# A fake input to trigger the error messages as it needs to be after a valid input #}
18+
{# If it's with the last input and it's inline then the error stacks under the last input label #}
19+
{# It has no name so no data will be sent #}
20+
<input type="radio" class="is-invalid" style="display: none"/>
21+
{% for error in field.errors %}
22+
<span class="invalid-feedback">{{ error }}</span>
23+
{% endfor %}
24+
{% endif %}
3325

3426
{% if field.help_text %}
35-
<span class="help-block">{{ field.help_text|safe }}</span>
27+
<span class="form-text">{{ field.help_text|safe }}</span>
3628
{% endif %}
3729
</div>
30+
</div>

‎rest_framework/templates/rest_framework/vertical/dict_field.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="mb-3">
22
{% if field.label %}
3-
<label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
3+
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
44
{% endif %}
55

6-
<p class="form-control-static">Dictionaries are not currently supported in HTML input.</p>
6+
<p class="form-label">Dictionaries are not currently supported in HTML input.</p>
77
</div>

‎rest_framework/templates/rest_framework/vertical/fieldset.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22

33
<fieldset>
44
{% if field.label %}
5-
<legend {% if style.hide_label %}class="sr-only"{% endif %}>
6-
{{ field.label }}
7-
</legend>
5+
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
86
{% endif %}
97

108
{% for nested_field in field %}

‎rest_framework/templates/rest_framework/vertical/input.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
<div class="mb-3 {% if field.errors %}has-error{% endif %}">
1+
<div class="mb-3">
22
{% if field.label %}
3-
<label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
3+
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
44
{% endif %}
55

6-
<input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value is not None %}value="{{ field.value }}"{% endif %} {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>
6+
<input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control{% if field.errors %} is-invalid{% endif %}"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value is not None %}value="{{ field.value }}"{% endif %} {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>
77

88
{% if field.errors %}
99
{% for error in field.errors %}
10-
<span class="help-block">{{ error }}</span>
10+
<span class="invalid-feedback">{{ error }}</span>
1111
{% endfor %}
1212
{% endif %}
1313

1414
{% if field.help_text %}
15-
<span class="help-block">{{ field.help_text|safe }}</span>
15+
<span class="form-text">{{ field.help_text|safe }}</span>
1616
{% endif %}
1717
</div>

‎rest_framework/templates/rest_framework/vertical/list_field.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="mb-3">
22
{% if field.label %}
3-
<label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
3+
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
44
{% endif %}
55

6-
<p class="form-control-static">Lists are not currently supported in HTML input.</p>
6+
<p class="form-label">Lists are not currently supported in HTML input.</p>
77
</div>

‎rest_framework/templates/rest_framework/vertical/list_fieldset.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
<fieldset>
22
{% if field.label %}
3-
<legend {% if style.hide_label %}class="sr-only"{% endif %}>
4-
{{ field.label }}
5-
</legend>
3+
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
64
{% endif %}
75

8-
<p>Lists are not currently supported in HTML input.</p>
6+
<p class="form-label">Lists are not currently supported in HTML input.</p>
97
</fieldset>

‎rest_framework/templates/rest_framework/vertical/radio.html

Lines changed: 16 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,56 +2,39 @@
22
{% load rest_framework %}
33
{% trans "None" as none_choice %}
44

5-
<div class="mb-3 {% if field.errors %}has-error{% endif %}">
5+
<div class="mb-3">
66
{% if field.label %}
7-
<label {% if style.hide_label %}class="sr-only"{% endif %}>
7+
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">
88
{{ field.label }}
99
</label>
1010
{% endif %}
11-
12-
{% if style.inline %}
13-
<div>
14-
{% if field.allow_null or field.allow_blank %}
15-
<label class="radio-inline">
16-
<input type="radio" name="{{ field.name }}" value="" {% if not field.value %}checked{% endif %} />
17-
{{ none_choice }}
18-
</label>
19-
{% endif %}
20-
21-
{% for key, text in field.choices|items %}
22-
<label class="radio-inline">
23-
<input type="radio" name="{{ field.name }}" value="{{ key }}" {% if key|as_string == field.value|as_string %}checked{% endif %}>
24-
{{ text }}
25-
</label>
26-
{% endfor %}
27-
</div>
28-
{% else %}
11+
<div>
2912
{% if field.allow_null or field.allow_blank %}
30-
<div class="radio">
31-
<label>
32-
<input type="radio" name="{{ field.name }}" value="" {% if not field.value %}checked{% endif %} />
33-
{{ none_choice }}
34-
</label>
13+
<div class="form-check {% if style.inline %}form-check-inline{% endif %}">
14+
<input class="form-check-input{% if field.errors %} is-invalid{% endif %}" type="radio" name="{{ field.name }}" value="" {% if not field.value %}checked{% endif %} />
15+
<label class="form-check-label">{{ none_choice }}</label>
3516
</div>
3617
{% endif %}
3718

3819
{% for key, text in field.choices|items %}
39-
<div class="radio">
40-
<label>
41-
<input type="radio" name="{{ field.name }}" value="{{ key }}" {% if key|as_string == field.value|as_string %}checked{% endif %}>
42-
{{ text }}
43-
</label>
20+
<div class="form-check {% if style.inline %}form-check-inline{% endif %}">
21+
<input class="form-check-input{% if field.errors %} is-invalid{% endif %}" type="radio" name="{{ field.name }}" value="{{ key }}" {% if key|as_string == field.value|as_string %}checked{% endif %}>
22+
<label class="form-check-label">{{ text }}</label>
4423
</div>
4524
{% endfor %}
46-
{% endif %}
4725

4826
{% if field.errors %}
27+
{# A fake input to trigger the error messages as it needs to be after a valid input #}
28+
{# If it's with the last input and it's inline then the error stacks under the last input label #}
29+
{# It has no name so no data will be sent #}
30+
<input type="radio" class="is-invalid" style="display: none"/>
4931
{% for error in field.errors %}
50-
<span class="help-block">{{ error }}</span>
32+
<span class="invalid-feedback">{{ error }}</span>
5133
{% endfor %}
5234
{% endif %}
5335

5436
{% if field.help_text %}
55-
<span class="help-block">{{ field.help_text|safe }}</span>
37+
<span class="form-text">{{ field.help_text|safe }}</span>
5638
{% endif %}
5739
</div>
40+
</div>

‎rest_framework/templates/rest_framework/vertical/select.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{% load rest_framework %}
22

3-
<div class="mb-3 {% if field.errors %}has-error{% endif %}">
3+
<div class="mb-3">
44
{% if field.label %}
5-
<label {% if style.hide_label %}class="sr-only"{% endif %}>
5+
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">
66
{{ field.label }}
77
</label>
88
{% endif %}
99

10-
<select class="form-control" name="{{ field.name }}">
10+
<select class="form-select{% if field.errors %} is-invalid{% endif %}" name="{{ field.name }}">
1111
{% if field.allow_null or field.allow_blank %}
1212
<option value="" {% if not field.value %}selected{% endif %}>--------</option>
1313
{% endif %}
@@ -24,11 +24,11 @@
2424

2525
{% if field.errors %}
2626
{% for error in field.errors %}
27-
<span class="help-block">{{ error }}</span>
27+
<span class="invalid-feedback">{{ error }}</span>
2828
{% endfor %}
2929
{% endif %}
3030

3131
{% if field.help_text %}
32-
<span class="help-block">{{ field.help_text|safe }}</span>
32+
<span class="form-text">{{ field.help_text|safe }}</span>
3333
{% endif %}
3434
</div>

‎rest_framework/templates/rest_framework/vertical/select_multiple.html

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,12 @@
22
{% load rest_framework %}
33
{% trans "No items to select." as no_items %}
44

5-
<div class="mb-3 {% if field.errors %}has-error{% endif %}">
5+
<div class="mb-3">
66
{% if field.label %}
7-
<label {% if style.hide_label %}class="sr-only"{% endif %}>
8-
{{ field.label }}
9-
</label>
7+
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
108
{% endif %}
119

12-
<select multiple {{ field.choices|yesno:",disabled" }} class="form-control" name="{{ field.name }}">
10+
<select multiple {{ field.choices|yesno:",disabled" }} class="form-select {% if field.errors %} is-invalid{% endif %}" name="{{ field.name }}">
1311
{% for select in field.iter_options %}
1412
{% if select.start_option_group %}
1513
<optgroup label="{{ select.label }}">
@@ -24,10 +22,10 @@
2422
</select>
2523

2624
{% if field.errors %}
27-
{% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
25+
{% for error in field.errors %}<span class="invalid-feedback">{{ error }}</span>{% endfor %}
2826
{% endif %}
2927

3028
{% if field.help_text %}
31-
<span class="help-block">{{ field.help_text|safe }}</span>
29+
<span class="form-text">{{ field.help_text|safe }}</span>
3230
{% endif %}
3331
</div>

‎rest_framework/templates/rest_framework/vertical/textarea.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
<div class="mb-3 {% if field.errors %}has-error{% endif %}">
1+
<div class="mb-3">
22
{% if field.label %}
3-
<label {% if style.hide_label %}class="sr-only"{% endif %}>
3+
<label class="form-label {% if style.hide_label %}sr-only{% endif %}">
44
{{ field.label }}
55
</label>
66
{% endif %}
77

8-
<textarea name="{{ field.name }}" class="form-control" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if style.rows %}rows="{{ style.rows }}"{% endif %}>{% if field.value %}{{ field.value }}{% endif %}</textarea>
8+
<textarea name="{{ field.name }}" class="form-control{% if field.errors %} is-invalid{% endif %}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if style.rows %}rows="{{ style.rows }}"{% endif %}>{% if field.value %}{{ field.value }}{% endif %}</textarea>
99

1010
{% if field.errors %}
11-
{% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
11+
{% for error in field.errors %}<span class="invalid-feedback">{{ error }}</span>{% endfor %}
1212
{% endif %}
1313

1414
{% if field.help_text %}
15-
<span class="help-block">{{ field.help_text|safe }}</span>
15+
<span class="form-text">{{ field.help_text|safe }}</span>
1616
{% endif %}
1717
</div>

‎tests/test_bound_fields.py

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,9 @@ class ExampleSerializer(serializers.Serializer):
7979
rendered = renderer.render_field(serializer['bool_field'], {})
8080
expected_packed = (
8181
'<divclass="mb-3">'
82-
'<divclass="checkbox">'
83-
'<label>'
84-
'<inputtype="checkbox"name="bool_field"value="true"checked>'
82+
'<divclass="form-check">'
83+
'<inputclass="form-check-input"type="checkbox"name="bool_field"value="true"checked>'
84+
'<labelclass="form-check-label">'
8585
'Boolfield'
8686
'</label>'
8787
'</div>'
@@ -146,16 +146,16 @@ class ExampleSerializer(serializers.Serializer):
146146
rendered = renderer.render_field(field, {})
147147
expected_packed = (
148148
'<fieldset>'
149-
'<legend>Nested2</legend>'
149+
'<labelclass="form-label">Nested2</label>'
150150
'<fieldset>'
151-
'<legend>Nested1</legend>'
151+
'<labelclass="form-label">Nested1</label>'
152152
'<divclass="mb-3">'
153-
'<label>Textfield</label>'
153+
'<labelclass="form-label">Textfield</label>'
154154
'<inputname="nested2.nested1.text_field"class="form-control"type="text"value="">'
155155
'</div>'
156156
'</fieldset>'
157157
'<divclass="mb-3">'
158-
'<label>Textfield</label>'
158+
'<labelclass="form-label">Textfield</label>'
159159
'<inputname="nested2.text_field"class="form-control"type="text"value="test">'
160160
'</div>'
161161
'</fieldset>'

0 commit comments

Comments
 (0)