Flask-WTF for form validation - Mini Project: Build & Apply

Flask-WTF for form validation

📖 Scenario: You are building a simple web page where users can submit their name and email to sign up for a newsletter.We want to make sure the form checks that the name is not empty and the email looks like a real email before accepting it.

🎯 Goal: Create a Flask app using Flask-WTF to build a form with name and email fields.Validate the form so it only accepts submissions with a non-empty name and a valid email address.

📋 What You'll Learn

Create a FlaskForm class with name and email fields

Add validators to ensure name is required and email is a valid email

Create a Flask route to display and process the form

Show a success message when the form is valid

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites for user input. Validating forms on the server side ensures data is correct and secure.

💼 Career

Understanding Flask-WTF is essential for backend web developers working with Flask to build secure and user-friendly forms.

1

Set up the Flask app and form class

Import Flask, FlaskForm, StringField, and SubmitField from flask_wtf and wtforms. Create a Flask app called app. Define a form class called SignupForm that inherits from FlaskForm with two fields: name and email as StringField, and a submit button as SubmitField.

Flask

# Import Flask and FlaskForm classes
# Create Flask app called app
# Define SignupForm class with name, email, and submit fields

Need a hint?

Remember to import all needed classes and create the Flask app instance.

Define the form class with the exact field names name, email, and submit.

2

Add validators to the form fields

Import DataRequired and Email validators from wtforms.validators. Add the DataRequired() validator to the name field and both DataRequired() and Email() validators to the email field in the SignupForm class.

Flask

from flask import Flask
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
# Import DataRequired and Email validators

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret-key'

class SignupForm(FlaskForm):
    # Add validators to name and email fields
    name = StringField('Name')
    email = StringField('Email')
    submit = SubmitField('Sign Up')

Need a hint?

Use the validators argument in the StringField constructor to add validation rules.

3

Create a route to display and process the form

Create a Flask route for '/' that accepts GET and POST methods. Inside the route function called signup, create an instance of SignupForm. Check if the form is submitted and valid using form.validate_on_submit(). If valid, return the string 'Thank you for signing up!'. Otherwise, render a template called 'signup.html' passing the form instance as form.

Flask

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired, Email

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret-key'

class SignupForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired()])
    email = StringField('Email', validators=[DataRequired(), Email()])
    submit = SubmitField('Sign Up')

# Create route '/' with GET and POST
# Create signup() function
# Instantiate SignupForm
# If form.validate_on_submit() is True, return success message
# Else render 'signup.html' with form

Need a hint?

Use @app.route decorator with methods=['GET', 'POST'].

Use form.validate_on_submit() to check if form is valid after submission.

4

Create the HTML template for the form

Create a file named signup.html in the templates folder. Use a simple HTML form that uses method='post' and includes {{ form.hidden_tag() }} for CSRF protection. Render the name and email fields with their labels and errors. Add the submit button. Make sure the form submits to the current page.

Flask

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired, Email

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret-key'

class SignupForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired()])
    email = StringField('Email', validators=[DataRequired(), Email()])
    submit = SubmitField('Sign Up')

@app.route('/', methods=['GET', 'POST'])
def signup():
    form = SignupForm()
    if form.validate_on_submit():
        return 'Thank you for signing up!'
    return render_template('signup.html', form=form)

# Create signup.html template with form
# Use form.hidden_tag(), form.name.label, form.name, form.name.errors
# Use form.email.label, form.email, form.email.errors
# Use form.submit

Need a hint?

Use form.hidden_tag() inside the form for security.

Render each field's label, input, and errors separately.

Set the form's method to post.