The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Form Validation with WTForms

Next ►
►

Form validation is a crucial aspect of web development, ensuring that the data submitted by users is accurate and meets the required criteria. WTForms is a flexible forms validation and rendering library for Python web development. In this section, we will explore how to use WTForms to create and validate forms in a Flask application.

Key Concepts

  1. WTForms Overview: Understanding the basics of WTForms and its integration with Flask.
  2. Creating Forms: How to define forms using WTForms.
  3. Form Validation: Implementing validation rules to ensure data integrity.
  4. Rendering Forms: Displaying forms in HTML templates.
  5. Handling Form Submissions: Processing and validating form data in Flask views.

  1. WTForms Overview

WTForms is a library that provides form handling and validation. It integrates seamlessly with Flask through the Flask-WTF extension, which adds additional features and simplifies the integration process.

Installation

To get started, you need to install Flask-WTF:

pip install Flask-WTF

  1. Creating Forms

To create a form using WTForms, you define a class that inherits from FlaskForm. Each field in the form is represented by a class attribute.

Example: Creating a Simple Form

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

class RegistrationForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), Length(min=4, max=25)])
    password = PasswordField('Password', validators=[DataRequired(), Length(min=6)])
    submit = SubmitField('Register')

Explanation

  • StringField and PasswordField are form fields.
  • validators is a list of validation rules applied to the field.
  • DataRequired ensures the field is not empty.
  • Length checks the length of the input.

  1. Form Validation

Validation is the process of checking if the data entered by the user meets the specified criteria. WTForms provides a variety of built-in validators.

Common Validators

  • DataRequired: Ensures the field is not empty.
  • Length: Validates the length of the input.
  • Email: Validates that the input is a valid email address.
  • EqualTo: Compares the value of two fields (useful for password confirmation).

Example: Adding More Validators

from wtforms.validators import Email, EqualTo

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

  1. Rendering Forms

To render forms in your HTML templates, you can use Jinja2 template syntax. Flask-WTF provides helper functions to simplify this process.

Example: Rendering a Form in a Template

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
</head>
<body>
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <p>
            {{ form.username.label }}<br>
            {{ form.username(size=32) }}<br>
            {% for error in form.username.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.email.label }}<br>
            {{ form.email(size=32) }}<br>
            {% for error in form.email.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}<br>
            {% for error in form.password.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.confirm_password.label }}<br>
            {{ form.confirm_password(size=32) }}<br>
            {% for error in form.confirm_password.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
</body>
</html>

Explanation

  • form.hidden_tag() is used to include hidden fields like CSRF token.
  • Each field is rendered using form.field_name().
  • Errors are displayed using a loop over form.field_name.errors.

  1. Handling Form Submissions

In your Flask view, you need to handle form submissions and validate the data.

Example: Handling Form Submission in a View

from flask import Flask, render_template, redirect, url_for, flash
from forms import RegistrationForm

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'

@app.route('/register', methods=['GET', 'POST'])
def register():
    form = RegistrationForm()
    if form.validate_on_submit():
        flash(f'Account created for {form.username.data}!', 'success')
        return redirect(url_for('home'))
    return render_template('register.html', form=form)

@app.route('/home')
def home():
    return "Welcome to the Home Page!"

if __name__ == '__main__':
    app.run(debug=True)

Explanation

  • validate_on_submit() checks if the form is submitted and valid.
  • flash() is used to display a success message.
  • redirect() and url_for() are used to navigate to another route.

Practical Exercise

Task

Create a login form with the following fields:

  • email (required, must be a valid email)
  • password (required, minimum length of 6 characters)
  • submit button

Solution

# forms.py
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Email, Length

class LoginForm(FlaskForm):
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired(), Length(min=6)])
    submit = SubmitField('Login')
# app.py
from flask import Flask, render_template, redirect, url_for, flash
from forms import LoginForm

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        flash(f'Logged in as {form.email.data}!', 'success')
        return redirect(url_for('home'))
    return render_template('login.html', form=form)

@app.route('/home')
def home():
    return "Welcome to the Home Page!"

if __name__ == '__main__':
    app.run(debug=True)
<!-- templates/login.html -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <p>
            {{ form.email.label }}<br>
            {{ form.email(size=32) }}<br>
            {% for error in form.email.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}<br>
            {% for error in form.password.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
</body>
</html>

Conclusion

In this section, we covered the basics of form validation using WTForms in Flask. We learned how to create forms, apply validation rules, render forms in templates, and handle form submissions. These skills are essential for building robust and user-friendly web applications. In the next module, we will explore file uploads and how to handle them securely in Flask.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved