Welcome folks today in this blog post we will be using the flask-wtf library to implement the form validation and be showing the custom error messages in browser. All the full source code of the application is shown below.
Get Started
In order to get started you need to install the below libraries using the below command as shown below
pip install flask
pip install flask-wtf
And after that you need to make an app.py file and copy paste the following code
app.py
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
from flask import Flask, render_template, request from flask_wtf import FlaskForm from wtforms import StringField, validators app = Flask(__name__) app.config['SECRET_KEY'] = 'secret' if __name__ == "__main__": app.run(debug=True) |
As you can see we are importing the wtf forms library at the top and now we need to create the templates directory and inside it we need to create the index.html file as shown below
app.py
|
1 2 3 |
@app.route('/', methods=['GET', 'POST']) def contact(): return render_template('index.html') |
As you can see inside the / route we are loading the index.html template using the render_template() method and now we need to define the index.html
Defining the Form Fields & Validators
Now we will be defining the wtf form and validators using the ContactForm class as shown below
|
1 2 3 4 5 6 7 8 9 |
class ContactForm(FlaskForm): name = StringField( 'Name', [validators.Length(min=5,max=15,message="Please enter the name in between 5 and 15 characters"),validators.DataRequired(message='Please enter your name')]) email = StringField('Email', [validators.DataRequired( message='Please enter your email address'), validators.Email(message='Invalid email address')]) message = StringField( 'Message', [validators.DataRequired(message='Please enter a message')]) |
As you can see we have three fields which will be the name email and message and we are defining the validators and also the custom message which will be shown to the user.
And now we can pass this form to the index.html template in the / route as shown below
app.py
|
1 2 3 4 5 6 7 |
@app.route('/', methods=['GET', 'POST']) def contact(): form = ContactForm() if request.method == 'POST' and form.validate(): # do something with the form data return 'Form submitted successfully!' return render_template('index.html', form=form) |
Now we will be defining the index.html inside the templates folder as shown below
templates/index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
{% block content %} <h1>Contact Us</h1> <form method="post" novalidate> {{ form.hidden_tag() }} {{ form.name.label }} {{ form.name }}<br> {% if form.name.errors %} <ul class="errors"> {% for error in form.name.errors %} <li>{{ error }}</li> {% endfor %} </ul> {% endif %} {{ form.email.label }} {{ form.email }}<br> {% if form.email.errors %} <ul class="errors"> {% for error in form.email.errors %} <li>{{ error }}</li> {% endfor %} </ul> {% endif %} {{ form.message.label }} {{ form.message }}<br> {% if form.message.errors %} <ul class="errors"> {% for error in form.message.errors %} <li>{{ error }}</li> {% endfor %} </ul> {% endif %} <input type="submit" value="Register"> </form> {% endblock %} |
As you can see we are using the jinja2 syntax or template to show the custom error messages based upon the if condition and also we are using for loop to iterate over all the error messages.
FULL SOURCE CODE
app.py
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
from flask import Flask, render_template, request from flask_wtf import FlaskForm from wtforms import StringField, validators app = Flask(__name__) app.config['SECRET_KEY'] = 'secret' class ContactForm(FlaskForm): name = StringField( 'Name', [validators.Length(min=5,max=15,message="Please enter the name in between 5 and 15 characters"),validators.DataRequired(message='Please enter your name')]) email = StringField('Email', [validators.DataRequired( message='Please enter your email address'), validators.Email(message='Invalid email address')]) message = StringField( 'Message', [validators.DataRequired(message='Please enter a message')]) @app.route('/', methods=['GET', 'POST']) def contact(): form = ContactForm() if request.method == 'POST' and form.validate(): # do something with the form data return 'Form submitted successfully!' return render_template('index.html', form=form) if __name__ == "__main__": app.run(debug=True) |
