Error message display in templates in Flask - Step-by-Step Execution

Concept Flow - Error message display in templates

User submits form

↓

Server validates input

↓

Valid?

No→Add error message

↓

Render template with errors

↓

Process data

↓

Template shows errors

↓

Redirect or show success

The flow shows how user input is checked, errors are collected if invalid, and then passed to the template to display messages.

Execution Sample

Flask

from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/submit', methods=['POST'])
def submit():
    errors = []
    if not request.form.get('name'):
        errors.append('Name is required')
    return render_template('form.html', errors=errors)

This code checks if the 'name' field is empty and adds an error message, then renders the template passing errors.

Execution Table

Step	Action	Input 'name' Field	Errors List	Template Rendered	Output Behavior
1	User submits form	'' (empty)	[]	No	Waiting for server
2	Check if 'name' exists	'' (empty)	[]	No	Validation starts
3	Add error if empty	'' (empty)	['Name is required']	No	Error added
4	Render template with errors	'' (empty)	['Name is required']	Yes	Template receives errors
5	Template displays errors	'' (empty)	['Name is required']	Yes	User sees error message
6	User submits form	'Alice'	[]	No	Waiting for server
7	Check if 'name' exists	'Alice'	[]	No	Validation starts
8	No error added	'Alice'	[]	No	No errors
9	Render template with errors	'Alice'	[]	Yes	Template receives empty errors
10	Template shows no errors	'Alice'	[]	Yes	User sees form without errors

💡 Execution stops after rendering template with or without errors based on input validation.

Variable Tracker

Variable	Start	After Step 3	After Step 8	Final
errors	[]	['Name is required']	[]	[]
request.form.get('name')	'' (empty)	'' (empty)	'Alice'	'Alice'

Key Moments - 2 Insights

Why does the errors list have messages only when the input is empty?

Because in the execution_table at step 3, the code checks if the 'name' field is empty and only then adds the error message. When the input is 'Alice' (step 8), no error is added.

How does the template know to show error messages?

The errors list is passed to the template in render_template (steps 4 and 9). The template uses this list to display messages if it is not empty.

Visual Quiz - 3 Questions

Look at the execution_table, what is the errors list after step 3 when the name field is empty?

A ['Invalid input']

B ['Name is required']

C []

D None

💡 Hint

Check the 'Errors List' column at step 3 in the execution_table.

At which step does the template first render with errors?

A Step 4

B Step 2

C Step 6

D Step 9

💡 Hint

Look for 'Template Rendered' marked 'Yes' with errors present in the execution_table.

If the user enters 'Bob' instead of empty, what happens to the errors list at step 8?

A It contains ['Invalid name']

B It contains ['Name is required']

C It is empty []

D It becomes None

💡 Hint

Refer to the 'Errors List' column at step 8 in the execution_table.

Concept Snapshot

In Flask, validate form data in your route.
If errors exist, add messages to a list.
Pass this list to your template with render_template.
In the template, loop over errors to display them.
This shows users what they need to fix.
Always check input before processing.

Full Transcript

When a user submits a form, Flask receives the data in the route function. The code checks if required fields like 'name' are filled. If not, it adds an error message to a list called errors. Then, Flask renders the HTML template and sends this errors list to it. The template shows these messages so the user knows what to fix. If the input is valid, errors stay empty and the form shows without messages. This process helps users correct mistakes before submitting successfully.

Practice

1. In Flask templates, how do you check if an error message exists before displaying it?

easy

A. Use Python if error: directly inside the template.

B. Always display the error message without any condition.

C. Use JavaScript to check for errors inside the template.

D. Use a Jinja2 {% if error %} condition to check if the error variable is set.

Solution

1. Step 1: Understand template logic in Flask

   Flask uses Jinja2 templating, which supports {% if %} statements to conditionally render content.

2. Step 2: Use Jinja2 syntax to check error existence

   Inside the template, you write {% if error %} to check if the error variable has a value before showing it.

3. Final Answer:

   Use a Jinja2 {% if error %} condition to check if the error variable is set. -> Option D

4. Quick Check:

   Jinja2 if condition = B [OK]

Hint: Use Jinja2 {% if %} to show errors only when present [OK]

Common Mistakes:

• Trying to use Python if statements directly in templates
• Displaying errors without checking if they exist
• Using JavaScript inside templates for error display

2. Which of the following is the correct syntax to display an error message stored in a variable named error inside a Flask template?

easy

A. {{ error }}

B. {% error %}

C. {% display error %}

D. [[ error ]]

Solution

1. Step 1: Recall Jinja2 variable display syntax

   In Flask templates, variables are shown using double curly braces like {{ variable }}.

2. Step 2: Apply to the error variable

   To display the error message stored in error, use {{ error }}.

3. Final Answer:

   {{ error }} -> Option A

4. Quick Check:

   Variable display uses {{ }} = A [OK]

Hint: Use {{ variable }} to show values in Flask templates [OK]

Common Mistakes:

• Using {% %} which is for logic, not display
• Using incorrect brackets like [[ ]]
• Trying to use custom tags like {% display %}

3. Given this Flask template snippet:

{% if errors %}
  
{{ errors[0] }}
{% endif %}

And the variable errors is a list: ["Invalid email"], what will be rendered?

medium

A. No output because errors is a list

B. errors[0]

C. Invalid email

D. Syntax error in template

Solution

1. Step 1: Check the condition {% if errors %}

   The list errors contains one item, so it is truthy and the block runs.

2. Step 2: Render the first error message

   The template outputs {{ errors[0] }} which is "Invalid email" inside a div with class "error".

3. Final Answer:

   <div class="error">Invalid email</div> -> Option C

4. Quick Check:

   Truthy list shows first error = C [OK]

Hint: If list has items, {% if list %} is true and shows first element [OK]

Common Mistakes:

• Thinking lists can't be checked in if conditions
• Expecting literal text 'errors[0]' instead of value
• Assuming syntax error due to list indexing

4. You wrote this Flask template code to show errors:

{% if error %}
  
{{ error }}
{% endif %}

But no error message shows even when you pass error='Invalid input' from Flask. What is the likely problem?

medium

A. Flask templates cannot display error messages.

B. The variable name in the template does not match the one passed from Flask.

C. The {% if %} block is not valid syntax.

D. You must use {{ error.message }} to display the error.

Solution

1. Step 1: Check variable names consistency

   If the Flask code passes error but the template uses a different variable name or none, the condition fails.

2. Step 2: Confirm template uses the exact variable name

   The template must use the same variable name error to display the message correctly.

3. Final Answer:

   Variable name mismatch causes no display. -> Option B

4. Quick Check:

   Variable name mismatch = D [OK]

Hint: Ensure template variable names match Flask context keys exactly [OK]

Common Mistakes:

• Assuming error is an object needing .message
• Thinking {% if %} syntax is wrong
• Believing Flask templates can't show errors

5. You want to display multiple error messages in a Flask template, but only if they exist. Which template code correctly shows all errors from a list errors with accessible markup?

hard

A. {% if errors %}

{% for e in errors %}
{{ e }}
{% endfor %}

{% endif %}

B. {% for e in errors %}
{{ e }}
{% endfor %}

C. {% if errors %}
{{ errors }}
{% endif %}

D.
{{ errors }}

Solution

1. Step 1: Check for errors existence before display

   Using {% if errors %} ensures the list is not empty before rendering.

2. Step 2: Loop through errors with {% for %} and use accessible markup

   Each error is shown in a list item inside a <ul> with aria-live="polite" for screen readers.

3. Final Answer:

   {% if errors %} with {% for %} loop in accessible <ul aria-live="polite"> -> Option A

4. Quick Check:

   Check if errors + loop + aria-live = A [OK]

Hint: Use {% if %} + {% for %} + aria-live for accessible error lists [OK]

Common Mistakes:

• Not checking if errors exist before looping
• Displaying the whole list as a string
• Missing accessibility attributes for screen readers