Flask Snippets

Snippets are unofficial and unmaintained.

This is an archived view of user-submitted snippets. Despite being hosted on the Flask site, they are not official. No Flask maintainer has curated or checked the snippets for security, correctness, or design.

Render WTForm fields with html attributes that cause TemplateSyntaxErrors

Posted by Josh Klein on 2013-02-14 @ 19:07 and filed in Forms

Suppose you had a WTForm TextField that you wanted to use a javascript library like bootstrap-typeahead.js on. You might want the field to render as:

<input type="text" data-provide='typeahead', data-items='3', data-source='["x","y","z"]'>

After creating a WTForm in the view and passing it to your template, your first attempt would be to pass the additional keyword arguments:

{{ form.myfield(name='test', data-provide='typeahead', data-data-items='3', data-source='["x","y","z"]') }}

But this will lead to a TemplateSyntaxError because a dash is the subtraction operator in Python, and we can't escape the character in a keyword argument's key.

Instead, pass the HTML attributes that contain invalid syntax as an ad-hoc dictionary:

{{ form.myfield(name='test', **{'data-provide':'typeahead','data-items':'3','data-source': '["x","y","z"]'}) }}

This snippet by Josh Klein can be used freely for anything you like. Consider it public domain.