WTForms/Jinja: Getting error when using just the field label

30 Views Asked by At

I'm getting this error when label is not paired with an input after it. But since it's Jinja generating the code, how can I fix this?

Error:

Incorrect use of <label for=FORM_ELEMENT>
The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.
To fix this issue, make sure the label's for attribute references the correct id of a form field.

This error shows up in the web developer's tool and does not otherwise, seem to effect anything else. I only see this error with form_name and sort_order and not with any other fields with a label/field data pairing


Here's my code:

Generated HTML:

<form action="/download" name="myForm" id="myForm" method="post">
    <input id="csrf_token" name="csrf_token" type="hidden" value="...">

    <form-title> <label for="form_name">Download Form</label> </form-title>

    <form-item class="radio-group">
      <label class="radio-label" for="sort_order">Sort Order</label>

        <input class="radio-btn" id="sort_order-0" name="sort_order" required type="radio" value="ascend">
        <label class="radio-value" for="sort_order-0">Ascending</label>
      
        <input checked class="radio-btn" id="sort_order-1" name="sort_order" required type="radio" value="descend">
        <label class="radio-value" for="sort_order-1">Descending</label>
       
    </form-item>

form.jinja

<form action="{{ url_for('download_func') }}" name="form" method="post">
<form-title> {{ form.form_name.label(class="form-title") }} </form-title>
<form-item class="radio-group">
{{ form.sort_order.label(class="radio-label") }}
{% for btn in form.sort_order %}
{{ btn(class="radio-btn") }}
{{ btn.label(class="radio-value") }}
{% endfor %} 
</form-item>
    ...
</form>

models.py

class DownloadForm(FlaskForm): 
    form_name = StringField(u'Download Form')

    sort_order_values = [('ascend', 'Ascending'), 
                         ('descend', 'Descending')]

    sort_order = RadioField(u'Sort Order', choices=sort_order_values, 
                            default='descend', validators=[DataRequired()])
    # other fields

0

There are 0 best solutions below