Introduction to Flask-WTF

Key Concepts

• Flask-WTF
• Form Classes
• Validation
• Rendering Forms

Flask-WTF

Flask-WTF is an extension for Flask that integrates the WTForms library, making it easier to handle forms in Flask applications. It provides a simple way to create, validate, and render forms, enhancing the user experience and ensuring data integrity.

Form Classes

In Flask-WTF, forms are defined as classes that inherit from the FlaskForm base class. Each form class contains fields that represent the input elements of the form. These fields can be of various types such as text, email, password, and more.

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

class LoginForm(FlaskForm):
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired()])
    submit = SubmitField('Login')
    

Validation

Validation is a crucial part of form handling. Flask-WTF allows you to add validators to each field, ensuring that the data entered by the user meets specific criteria. Common validators include DataRequired, Email, Length, and more.

from wtforms.validators import Length, EqualTo

class RegistrationForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), Length(min=4, max=20)])
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired()])
    confirm_password = PasswordField('Confirm Password', validators=[DataRequired(), EqualTo('password')])
    submit = SubmitField('Register')
    

Rendering Forms

Once a form is defined, it can be rendered in a template using Jinja2 syntax. Flask-WTF provides convenient methods to render each field, including labels, input elements, and validation messages.

<form method="POST" action="/login">
    {{ form.hidden_tag() }}
    <div>
        {{ form.email.label }} {{ form.email() }}
        {% for error in form.email.errors %}
            <span style="color: red;">{{ error }}</span>
        {% endfor %}
    </div>
    <div>
        {{ form.password.label }} {{ form.password() }}
        {% for error in form.password.errors %}
            <span style="color: red;">{{ error }}</span>
        {% endfor %}
    </div>
    <div>
        {{ form.submit() }}
    </div>
</form>