jinja2.exceptions.UndefinedError: 'render_field' is undefined

Question

So I just started using Wtforms in conjunction with Flask, I set up basic class and defined all of my fields in forms.py as you can see here...

from wtforms import Form, TextField, validators, PasswordField, DateField

class AddAccount(Form):
    username = TextField('Username', [validators.Length('min=3, max=20')])
    email = TextField('Email', [validators.Length('min=1, max=255')])
    karma = TextField('Karma', [validators.Length('min=1, max=10000000')])
    password = PasswordField('Password', [validators.Length('min=6, max=255')])

then I imported the AddAccount class into views.py as you can see here...

from forms import AddAccount

@app.route('/dashboard/add', methods=['POST', 'GET'])
def add_account():

    form = AddAccount(request.form)

    if request.method == 'POST' and form.validate():
        print('POST request')


    return render_template('add_account.html', form=form)

and here's the template file...

{% extends 'layout.html' %}

{% block body %}
    <br>
    <div class="jumbotron text-center">
       <h1>Add an Account</h1>
       <hr>
       <form action="{{url_for('add_account')}}">
            <div class="form-group">
                {{render_field(form.username, class_='form-control')}}
            </div>
            <div class="form-group">
                {{render_field(form.email, class_='form-control')}}    
            </div>
            <div class="form-group">
                {{render_field(form.password, class_='form-control')}}
            </div>
            <div class="form-group">
                {{render_field(form.karma, class_='form-control')}}
            </div>
        </form>
    </div>
{% endblock %}

That whole contraption cause this error jinja2.exceptions.UndefinedError: 'render_field' is undefined and I have absolutely no idea why it's happening or how to fix it. Any help will be appreciated.

And if it helps... here's the stack trace...

Traceback (most recent call last):
  File "C:\Users\Hassan\AppData\Local\Programs\Python\Python36\lib\site-packages\flask\app.py", line 1997, in __call__
    return self.wsgi_app(environ, start_response)
  File "C:\Users\Hassan\AppData\Local\Programs\Python\Python36\lib\site-packages\flask\app.py", line 1985, in wsgi_app
    response = self.handle_exception(e)
  File "C:\Users\Hassan\AppData\Local\Programs\Python\Python36\lib\site-packages\flask\app.py", line 1540, in handle_exception
    reraise(exc_type, exc_value, tb)
  File "C:\Users\Hassan\AppData\Local\Programs\Python\Python36\lib\site-packages\flask\_compat.py", line 33, in reraise
    raise value
  File "C:\Users\Hassan\AppData\Local\Programs\Python\Python36\lib\site-packages\flask\app.py", line 1982, in wsgi_app
    response = self.full_dispatch_request()
  File "C:\Users\Hassan\AppData\Local\Programs\Python\Python36\lib\site-packages\flask\app.py", line 1614, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "C:\Users\Hassan\AppData\Local\Programs\Python\Python36\lib\site-packages\flask\app.py", line 1517, in handle_user_exception
    reraise(exc_type, exc_value, tb)
  File "C:\Users\Hassan\AppData\Local\Programs\Python\Python36\lib\site-packages\flask\_compat.py", line 33, in reraise
    raise value
  File "C:\Users\Hassan\AppData\Local\Programs\Python\Python36\lib\site-packages\flask\app.py", line 1612, in full_dispatch_request
    rv = self.dispatch_request()
  File "C:\Users\Hassan\AppData\Local\Programs\Python\Python36\lib\site-packages\flask\app.py", line 1598, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
  File "E:\Python\manager\views.py", line 37, in add_account
    return render_template('add_account.html', form=form)
  File "C:\Users\Hassan\AppData\Local\Programs\Python\Python36\lib\site-packages\flask\templating.py", line 134, in render_template
    context, ctx.app)
  File "C:\Users\Hassan\AppData\Local\Programs\Python\Python36\lib\site-packages\flask\templating.py", line 116, in _render
    rv = template.render(context)
  File "C:\Users\Hassan\AppData\Local\Programs\Python\Python36\lib\site-packages\jinja2\asyncsupport.py", line 76, in render
    return original_render(self, *args, **kwargs)
  File "C:\Users\Hassan\AppData\Local\Programs\Python\Python36\lib\site-packages\jinja2\environment.py", line 1008, in render
    return self.environment.handle_exception(exc_info, True)
  File "C:\Users\Hassan\AppData\Local\Programs\Python\Python36\lib\site-packages\jinja2\environment.py", line 780, in handle_exception
    reraise(exc_type, exc_value, tb)
  File "C:\Users\Hassan\AppData\Local\Programs\Python\Python36\lib\site-packages\jinja2\_compat.py", line 37, in reraise
    raise value.with_traceback(tb)
  File "E:\Python\manager\templates\add_account.html", line 1, in top-level template code
    {% extends 'layout.html' %}
  File "E:\Python\manager\templates\layout.html", line 22, in top-level template code
    {% block body %}{% endblock %}
  File "E:\Python\manager\templates\add_account.html", line 10, in block "body"
    {{render_field(form.username, class_='form-control')}}
jinja2.exceptions.UndefinedError: 'render_field' is undefined

score 5 · Accepted Answer · answered Apr 01 '18 at 15:55

Why do you think there's a render_field Function? Any reference on this, what docs are you reading? Anyways, this should do the trick:

{% extends 'layout.html' %}

{% block body %}
    <br>
    <div class="jumbotron text-center">
       <h1>Add an Account</h1>
       <hr>
       <form action="{{url_for('add_account')}}">
            <div class="form-group">
                {{form.username(class_='form-control')}}
            </div>
            <div class="form-group">
                {{form.email(class_='form-control')}}    
            </div>
            <div class="form-group">
                {{form.password(class_='form-control')}}
            </div>
            <div class="form-group">
                {{form.karma(class_='form-control')}}
            </div>
        </form>
    </div>
{% endblock %}

Also see Add a css class to a field in wtform.

thank you I was stuck on this. What is the benefit of using a macro render_field? — aero8991, Apr 23 '22 at 16:32

score 2 · Answer 2 · edited Mar 23 '20 at 04:41

2

you need to create partial file eg _formhelpers.html.
go to this link and copy the Forms in Templates code and past it in the _formhelpers.html that you have created
in your template file add this line of code

{% from '_formhelpers.html' import render_field %}

edited Mar 23 '20 at 04:41

keikai

14,085
9
49
68

answered Mar 23 '20 at 03:41

Abdirasak Ahmed

21
1

score 1 · Answer 3 · answered Nov 17 '18 at 16:07

You could probably create a new file as _formhelpers.html with content as

{% macro render_field(field) %}
  <dt>{{ field.label }}
  <dd>{{ field(**kwargs)|safe }}
  {% if field.errors %}
    <ul class=errors>
    {% for error in field.errors %}
      <li>{{ error }}</li>
    {% endfor %}
    </ul>
  {% endif %}
  </dd>
{% endmacro %}

Then, include the same just before the form is loaded in VIEW

{% block body %}
<h1>Register </h1>
{% from '/includes/_formhelpers.html' import render_field %}
<form method="POST" action="">
    <div class="form-group">
        {{render_field(form.name ,class_="form-control")}}
    </div>
    <p><input type="submit" class="btn btn-primary" value="Submit"></p>
</form>

This should solve the problem for you. Thanks!

Documentation can be found here

score -2 · Answer 4 · edited Jun 10 '21 at 10:14

-2

You must use this code:

{% from "includes/_formhelpers.html" import render_field %}

for template file.

Or you can include _fromhelpers.html.

edited Jun 10 '21 at 10:14

janw

8,758
11
40
62

answered Jun 10 '21 at 10:07

mustafa sungur taş

1

jinja2.exceptions.UndefinedError: 'render_field' is undefined

4 Answers4