WTF-Forms EqualTo validator not giving error message

Question

I have a registration form with a password and confirm password field. When the form is submitted and the passwords do not match, it is not returning any error message. The registration itself works, it would just be nice to show the error message saying that the passwords don't match. I have seen others having the same issue, but it's always regarded to something else in the code (could also be in my case). Here is my form class:

class UserForm(FlaskForm):
username = StringField("Enter Username:", validators=[InputRequired()])
email = EmailField("Enter Email:", validators=[InputRequired()])
#password = PasswordField("Enter Password:", validators=[InputRequired()])
password_hash = PasswordField("Enter Password:", validators=[InputRequired(), EqualTo('password_hash2', message="Passwords Must Match!")])
password_hash2 = PasswordField("Confirm Password:", validators=[InputRequired()])
currency = SelectField("Choose a Currency:", choices=[("USD"),("EUR"),("NOK")])
profile_pic = FileField("Profile Pic")
submit = SubmitField("Submit")

This is the route:

@app.route("/user/add", methods=['GET', 'POST'])
def add_user():
    username = None
    form = UserForm()
    if form.validate_on_submit():
        user_email = Users.query.filter_by(email=form.email.data).first()
        user_username = Users.query.filter_by(username=form.username.data).first()
        if user_email is None and user_username is None:
            hashed_pw = generate_password_hash(form.password_hash.data, "sha256")
            user = Users(username=form.username.data, email=form.email.data, password_hash=hashed_pw, currency=form.currency.data)  #, password=form.password.data)
            db.session.add(user)
            db.session.commit()
        elif user_email is None:
            flash("Username Taken")
            return redirect("/user/add")
        elif user_username is None:
            flash("Email already in use")
            return redirect("/user/add")
        elif user_email is not None and user_username is not None:
            flash("Email and Username Taken")
            return redirect("/user/add")
        username = form.username.data
        form.username.data = ''
        form.email.data = ''
        form.password_hash.data = ''
        #form.password.data = ''

        flash("User Added Successfully - " + username)
    our_users = Users.query.order_by(Users.date_added)
    return render_template("signup.html", form=form, username=username, our_users=our_users)

And this is the html code:

{% extends "mal.html" %}

{% block innhold %}
    {% if username %}
    {% for message in get_flashed_messages() %}
    <br>
    <div class="alert alert-primary alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
{% endfor %}
    <h3>You may now log in to the website</h3>
    <br>
    <a href=/login>Click here to login</a>
    <br>
    {% else %}
    {% for message in get_flashed_messages() %}
    <br>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
{% endfor %}
    <br>
    <h1>Sign Up</h1>
    <h2>Sign Up Form:</h2>
    <br>
    <div class="shadow p-3 mb-5 bg-body rounded">
    <form method="POST">
        {{ form.hidden_tag() }}
        {{ form.email.label() }}
        <br>
        {{ form.email(placeholder="[email protected]", class="form-control") }}
        <br>
        {{ form.username.label() }}
        <br>
        {{ form.username(class="form-control") }}
        <br>
        {{ form.password_hash.label() }}
        <br>
        {{ form.password_hash(class="form-control") }}
        <div id="passwordHelpBlock" class="form-text">
            Your password should be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
        </div>
        <br>
        {{ form.password_hash2.label() }}
        <br>
        {{ form.password_hash2(class="form-control") }}
        <br>
        {{ form.currency.label(class="d-none") }}
        {{ form.currency(class="form-control d-none") }}
        {{ form.submit(class="btn btn-success") }}
        <br><br>
        <small><a href=/login>Already have an account? Login here!</a></small>
        <br>
    </form>
    </div>
    <br><br><br>
    {% endif %}
{% endblock %}

I hope someone is able to figure out the issue or find a different way to solve it than EqualTo, thanks :)

Answer 1

The problem is that you are not displaying the error messages, even though they are working in the background. Use a block like this to get and display any error messages for the specified field.

{% for error in form.your_form_field.errors %}
    {{ error }}
{% endfor %}