Web Technologies/2021-2022/Laboratory 13

From Wikiversity
Jump to navigation Jump to search

Form validation using WTForms[edit | edit source]

Validating form is going to be one of the most essential steps when building web applications.

Today we will see an approach of using WTFormsand Flask-login in order to implement a register/login mechanism.

We will start off with creating a simple User model:

class User(UserMixin, db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(25))
    email = db.Column(db.String(35))
    password = db.Column(db.String(120))

    def __init__(self, username, email, password):
        self.username = username
        self.email = email
        self.password = password

Then we will create two classes for our Registration and Login forms. WTForms lets us define fields such as StringField, PasswordField together with validators such as Length, Email, DataRequired:

class RegistrationForm(FlaskForm):
    username = StringField('Username', [validators.Length(min=4, max=25)])
    email = StringField('Email Address', [validators.Length(min=6, max=35), validators.Email()])
    password = PasswordField('New Password', [
        validators.EqualTo('confirm', message='Passwords must match')
    confirm = PasswordField('Repeat Password')

class LoginForm(FlaskForm):
    email = StringField('Email',
                                    validators.Length(1, 64),
    password = PasswordField('Password', validators=[validators.DataRequired()])
    submit = SubmitField('Log In')

    def validate(self):
        initial_validation = super(LoginForm, self).validate()
        if not initial_validation:
            return False
        user = User.query.filter_by(email=self.email.data).first()
        if not user:
            self.email.errors.append('Unknown email')
            return False
        if not user.verify_password(self.password.data):
            self.password.errors.append('Invalid password')
            return False
        return True

We will have to implement routes for login/register:

@app.route('/register', methods=['GET', 'POST'])
def register():
    form = RegistrationForm(request.form)
    if request.method == 'POST' and form.validate():
        user = User(form.username.data, form.email.data,
        flash('Thanks for registering')
        return redirect(url_for('login'))
    return render_template('register.html', form=form)

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm(request.form)
    if form.validate_on_submit():
        user = User.query.filter_by(email=form.email.data).first()
        if user is not None and user.verify_password(form.password.data):
            redirect_url = request.args.get('next') or url_for('main.login')
            return redirect(redirect_url)
    return render_template('login.html', form=form)

We will write a Jinja2 macrofor our views. This macro will help us render each individual field of a form, containing our labels and displaying errors if any.

{% 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 %}
  {% endif %}
{% endmacro %}

So for example this is what our register.html template will look like with the help of render_field macro:


{% from "_formhelpers.html" import render_field %}
<form method="POST">
    {{ render_field(form.username) }}
    {{ render_field(form.email) }}
    {{ render_field(form.password) }}
    {{ render_field(form.confirm) }}
  <p><input type="submit" value="Register">

Respectively, this will be our login.html form:


{% from "_formhelpers.html" import render_field %}
<form id="loginForm" method="POST" role="form">
    {{ form.hidden_tag }}
    {{ render_field(form.email, placeholder="email") }}<br>
    {{ render_field(form.password, placeholder="password") }}<br>
    <p><input type="submit" value="Login"></p>

<a href="/">index</a><br>
<a href="/register">register</a><br>

The following imports and additional configurations steps needed in main.py:

import os

from flask import Flask, render_template, redirect, flash, url_for
from flask_sqlalchemy import SQLAlchemy
from flask import request, json

from flask_wtf import FlaskForm
import email_validator
from wtforms import BooleanField, StringField, PasswordField, SubmitField, validators

from flask_login import LoginManager
from flask_login import UserMixin

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
db = SQLAlchemy(app)
login_manager = LoginManager()
login_manager.session_protection = 'strong'
login_manager.login_view = 'main.login'

We will have to configure our login manager:

if __name__ == '__main__':
    app.secret_key = 'test123'
    app.config['SESSION_TYPE'] = 'filesystem'



In the end, you should have a directory structure similar to:

├── app
│   ├── instance
│      └── test.db
│   ├── main.py
│   └── templates
│       ├── _formhelpers.html
│       ├── index.html
│       ├── login.html
│       └── register.html
├── requirements.txt
└── venv