python - Setting data attributes on a WTForms field

Question

I want to add "data-" attributes to a form field for integration with Bootstrap. I tried the following in a template:

{{ form.test(data-toggle="toggle", data-size="mini", data-on="Yes", data-off="No", type="checkbox")}}

and got this error:

TemplateSyntaxError: expected token ',', got '='

Why did I get this error and how do I fix it?

Answer 1

You need to use valid Python names as the variable names. Therefore names like "data-toggle" are invalid because they have a "-" in them. Change the names to use underscores, like "data_toggle". WTForms automatically converts "_" to "-" for keywords it doesn't recognize.

{{ form.test(data_size="mini") }}

You can also use dict unpacking to pass keyword arguments with keys that aren't valid variables.

{{ form.name(**{"data-size": "mini"}) }}

Rather than setting the attributes when rendering, you can set the default attributes for the field with render_kw.

class ExampleForm(Form):
    name = StringField(render_kw={"data-size": "mini"})