Password Validation Not Working For Flask Form

Question

I'm trying to implement a form where I want a message to be shown in advance if passwords don't match. I have added a data required validator but password matching validator isn't working.

Here's how a data required validator looks like, I want a similar password matching validator.

My forms.py file:

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, TextField, validators
from wtforms.validators import DataRequired, Email, EqualTo
# import validators

class PasswordForm(FlaskForm):
    password = PasswordField('Password', validators=[validators.DataRequired(), validators.EqualTo('confirm', message='Passwords must match')])
    confirm = PasswordField('Confirm Password', validators=[validators.DataRequired()])

My reset_with_token.html:

{% extends "base.html" %}
{% block content %}
<div id="wrapper">
    <div style="margin: 0;
    padding-left: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: x-large;
  /* height: 100%; display: flex; flex-direction: column;
            align-items: center */
  ">
        <form action=" {{ url_for('reset_with_token', token=token) }}" method="POST">
            <div class="form-group">
                {{ form.password.label }}:
                <br>
                {{ form.password}}
                <br>
                {{ form.confirm.label }}:
                <br>
                {{ form.confirm}}
                {{ form.csrf_token }}
            </div>
            <input type="submit" class="btn btn-primary block full-width m-b" value="Change my password" />
        </form>
    </div>
</div>



{% endblock %}

The reset_with_token route:

@app.route('/api/reset/<token>', methods=["GET", "POST"])
def reset_with_token(token):
    ts = URLSafeTimedSerializer(app.config["SECRET_KEY"])
    try:
        email = ts.loads(token, salt="recover-key", max_age=86400)
        print('CORRECT REACHED')
    except:
        print('ERROR')
        abort(404)

    form = PasswordForm()

    # if db.session.query(user_table).filter_by(email=email).count() > 0:
    if form.validate_on_submit():
        # user = User.query.filter_by(email=email).first_or_404()
        user = db.session.query(user_table).filter_by(email=email).first_or_404()

        # user.password = form.password.data
        user.password = guard.hash_password(form.password.data)
        # guard.hash_password('password')

        db.session.add(user)
        db.session.commit()

        # return redirect(url_for('signin'))
        return 'YES'
    else:
        flash('Passwords should match')

    return render_template('reset_with_token.html', form=form, token=token)

Am I missing something here? I'm very new to Flask.

Answer 1

you need to make the validation in the frontend. here is a javascript example, how you can check this:

<table border="0" cellpadding="3" cellspacing="0">
    <tr>
        <td>
            Password:
        </td>
        <td>
            <input type="password" id="txtPassword" />
        </td>
    </tr>
    <tr>
        <td>
            Confirm Password:
        </td>
        <td>
            <input type="password" id="txtConfirmPassword" />
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <input type="button" id="btnSubmit" value="Submit" onclick="return Validate()" />
        </td>
    </tr>
</table>
<script type="text/javascript">
    function Validate() {
        var password = document.getElementById("txtPassword").value;
        var confirmPassword = document.getElementById("txtConfirmPassword").value;
        if (password != confirmPassword) {
            alert("Passwords do not match.");
            return false;
        }
        return true;
    }
</script>

Answer 2

your validation is not working because the browser validation is activated, disable it by adding novalidate attribute to your form tag