Error message display in templates in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Flask display error messages in templates?

Consider a Flask app that passes an error message to a template using render_template. What will the template show if the error message is empty?

Flask

from flask import Flask, render_template_string
app = Flask(__name__)

@app.route('/')
def home():
    error = ''
    return render_template_string('<p>{% if error %}Error: {{ error }}{% else %}No errors{% endif %}</p>', error=error)

A The page shows: 'Error: ' with no message

B The page raises a TemplateSyntaxError

C The page shows nothing

D The page shows: 'No errors'

💡 Hint

Think about how the {% if %} statement works with empty strings in Jinja2 templates.

In Jinja2, empty strings are treated as false in conditionals. So, if error is empty, the {% else %} block runs, showing 'No errors'.

📝 Syntax

intermediate

Identify the syntax error in this Flask template error display

Which option contains a syntax error in the Jinja2 template code for displaying an error message?

Flask

{% if error %}Error: {{ error }}{% endif else %}No errors{% endif %}

A {% if error %}Error: {{ error }}{% endif else %}No errors{% endif %}

B }% fidne %{srorre oN}% esle %{}} rorre {{ :rorrE}% rorre fi %{

C {% if error %}Error: {{ error }}{% else %}No errors{% endif %}

D % if error %}Error: {{ error }}{% else %}No errors{% endif %}

💡 Hint

Look carefully at the placement of {% endif %} and {% else %} tags.

Option A incorrectly places {% endif %} before {% else %}, which breaks the if-else block syntax in Jinja2.

❓ state_output

advanced

What is the output when multiple error messages are passed as a list?

Given this Flask route and template snippet, what will be the rendered output?

from flask import Flask, render_template_string
app = Flask(__name__)

@app.route('/')
def home():
    errors = ['Name required', 'Email invalid']
    return render_template_string('''
<ul>
{% for error in errors %}
  <li>{{ error }}</li>
{% endfor %}
</ul>
''', errors=errors)

A <ul></ul>

B <ul><li>Name required, Email invalid</li></ul>

C <ul><li>Name required</li><li>Email invalid</li></ul>

D Template rendering error due to list

💡 Hint

Think about how Jinja2 loops over lists in templates.

The template loops over each error string and creates a list item for each. So both errors appear as separate <li> elements.

🔧 Debug

advanced

Why does this Flask template not show the error message?

Given this Flask route and template, why does the error message not appear on the page?

from flask import Flask, render_template_string
app = Flask(__name__)

@app.route('/')
def home():
    error = None
    return render_template_string('<p>Error: {{ error }}</p>', error=error)

A Because error is None, it renders as an empty string, so no visible message

B Because the variable 'error' is not passed to the template

C Because Flask does not allow None values in templates

D Because the template syntax is invalid and raises an error

💡 Hint

Consider how Jinja2 renders None values.

Jinja2 converts None to an empty string when rendering, so the paragraph shows 'Error: ' with no visible message.

🧠 Conceptual

expert

Which option correctly implements error message display with accessibility in Flask templates?

Choose the template snippet that best supports accessibility when showing error messages in a Flask app.

A <p>{{ error }}</p>

B <div role="alert" aria-live="assertive">{{ error }}</div>

C <span style="color:red">{{ error }}</span>

D <div aria-hidden="true">{{ error }}</div>

💡 Hint

Think about how screen readers detect important messages.

Using role="alert" and aria-live="assertive" tells assistive technologies to announce the error immediately, improving accessibility.

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