Fix duplicate labels on form inputs

It’s invalid HTML to have multiple labels nested within each other. This
was happening by accident because WTForms tries to be clever – when you
put `{{ field.label }}` in a template it prints a `<label>` tag for you,
not just the text of the label. But we put our own `<label>` tags in the
HTML to have more control of them.

This commit stops WTForms being so clever.
This commit is contained in:
Chris Hill-Scott
2017-02-13 09:50:26 +00:00
parent 4fe08d342a
commit 3f41090a94
5 changed files with 8 additions and 8 deletions

View File

@@ -9,7 +9,7 @@
) %} ) %}
<label class="{% if block %}block-label{% endif %}" for="{{ field.name }}"> <label class="{% if block %}block-label{% endif %}" for="{{ field.name }}">
{{ field()}} {{ field()}}
{{ field.label }} {{ field.label.text }}
{% if hint %} {% if hint %}
<span class="form-hint"> <span class="form-hint">
{{ hint }} {{ hint }}
@@ -26,4 +26,4 @@
</p> </p>
{% endif %} {% endif %}
</label> </label>
{% endmacro %} {% endmacro %}

View File

@@ -1,7 +1,7 @@
{% macro file_upload(field, button_text="Choose file", alternate_link=None, alternate_link_text=None) %} {% macro file_upload(field, button_text="Choose file", alternate_link=None, alternate_link_text=None) %}
<form method="post" enctype="multipart/form-data" class="{% if field.errors %}error{% endif %}" data-module="file-upload"> <form method="post" enctype="multipart/form-data" class="{% if field.errors %}error{% endif %}" data-module="file-upload">
<label class="file-upload-label" for="{{ field.name }}"> <label class="file-upload-label" for="{{ field.name }}">
<span class="visually-hidden">{{ field.label }}</span> <span class="visually-hidden">{{ field.label.text }}</span>
{% if hint %} {% if hint %}
<span class="form-hint"> <span class="form-hint">
{{ hint }} {{ hint }}

View File

@@ -11,7 +11,7 @@
<fieldset class="form-group{% if field.errors %} error{% endif %}" id="{{ field.name }}"> <fieldset class="form-group{% if field.errors %} error{% endif %}" id="{{ field.name }}">
<legend> <legend>
<span class="form-label"> <span class="form-label">
{{ field.label }} {{ field.label.text }}
{% if hint %} {% if hint %}
<span class="form-hint"> <span class="form-hint">
{{ hint }} {{ hint }}

View File

@@ -7,7 +7,7 @@
<div class="form-group {% if field.errors %} error{% endif %}"> <div class="form-group {% if field.errors %} error{% endif %}">
<fieldset> <fieldset>
<legend class="form-label"> <legend class="form-label">
{{ field.label }} {{ field.label.text }}
{% if field.errors %} {% if field.errors %}
<span class="error-message"> <span class="error-message">
{{ field.errors[0] }} {{ field.errors[0] }}
@@ -46,7 +46,7 @@
<div class="{{ wrapping_class }} {% if field.errors %} error{% endif %}"> <div class="{{ wrapping_class }} {% if field.errors %} error{% endif %}">
<fieldset> <fieldset>
<legend class="form-label"> <legend class="form-label">
{{ field.label }} {{ field.label.text }}
{% if field.errors %} {% if field.errors %}
<span class="error-message"> <span class="error-message">
{{ field.errors[0] }} {{ field.errors[0] }}
@@ -80,7 +80,7 @@
<div class="form-group {% if field.errors %} error{% endif %}"> <div class="form-group {% if field.errors %} error{% endif %}">
<fieldset> <fieldset>
<legend class="form-label"> <legend class="form-label">
{{ field.label }} {{ field.label.text }}
{% if field.errors %} {% if field.errors %}
<span class="error-message"> <span class="error-message">
{{ field.errors[0] }} {{ field.errors[0] }}

View File

@@ -16,7 +16,7 @@
{% if label %} {% if label %}
{{ label }} {{ label }}
{% else %} {% else %}
{{ field.label }} {{ field.label.text }}
{% endif %} {% endif %}
{% if hint %} {% if hint %}
<span class="form-hint"> <span class="form-hint">