[FIXED] TypeError: 'UnboundField' object is not callable with Flask

Issue

I'm running Flask version 1.1.2

I have the following code for my registration form

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, BooleanField
from wtforms.validators import DataRequired, Length, EqualTo, Email

class RegistrationForm(FlaskForm):
    def __init__(self):
        self.username = StringField("Username", validators=[DataRequired(), Length(min=2, max=20)])
        self.email = StringField("EMail", validators = [DataRequired(), Email()])
        self.password = PasswordField("Password", validators = [DataRequired(), Length(min = 5)])
        self.confirm_password = PasswordField("Confirm password", validators = [DataRequired(), EqualTo("password")])
        self.submit = SubmitField("Sign Up")

And here's the registration page:

{% extends "layout.html" %}
{% block content %}
    <div class="content-section">
      <form method="POST" action="">


        <fieldset class = "form-group">
          <legend class="border-bottom mb-4">Sign In</legend>

          <div class="form-group">
            {{ form.username(class="form-control form-control-lg") }}
          </div>
          <div class="form-group">
            {{ form.email(class="form-control form-control-lg") }}
          </div>
          <div class="form-group">
            {{ form.password(class="form-control form-control-lg") }}
          </div>
          <div class="form-group">
            {{ form.confirm_password(class="form-control form-control-lg") }}
          </div>
        </fieldset>

        <div class="form-group">
          {{ form.submit(class="btn btn-outline-info") }}
        </div>
    </div>

    <div class="border-top pt-3">
      <small class="text-muted">
        Already have an account? <a class="ml-2" href="{{ url_for('register') }}">Sign in </a>
      </small>


{% endblock content %}

However when I try to access the registration page I get the following error:

  File "D:\xy\-Python\Modules\Flask\Flask_Blog\templates\register.html", line 1, in top-level template code
    {% extends "layout.html" %}
  File "D:\xy\-Python\Modules\Flask\Flask_Blog\templates\layout.html", line 43, in top-level template code
    {% block content %}{% endblock %}
  File "D:\xy\-Python\Modules\Flask\Flask_Blog\templates\register.html", line 11, in block "content"
    {{ form.username(class="form-control form-control-lg") }}
TypeError: 'UnboundField' object is not callable

(there's at least 20 lines above that as well)

Solution

You should change the class notation as follows. This goes for all fields where you want to add classes. See documentation at https://wtforms.readthedocs.io/en/2.3.x/fields/

{{ form.username(class_="form-control form-control-lg") }}

and change your form to the following, see https://flask-wtf.readthedocs.io/en/stable/quickstart.html#creating-forms

class RegistrationForm(FlaskForm):
    username = StringField("Username", validators=[DataRequired(), Length(min=2, max=20)])
    email = StringField("EMail", validators = [DataRequired(), Email()])
    password = PasswordField("Password", validators = [DataRequired(), Length(min = 5)])
    confirm_password = PasswordField("Confirm password", validators = [DataRequired(), EqualTo("password")])
    submit = SubmitField("Sign Up")

Answered By - gittert