Flask form not validating on submit

March 18, 2023

I’m trying to make a form that looks like an exam page. I have a checkbox and a submit button, the submit button when clicked does not do anything.

The HTML code in exam.html

{% extends 'layout.html' %}

{% block content %}
    <h3 class="pt-5 p-4">exam page</h3>

    <div class="form">
        <fieldset class="form-group">
            <form method="POST" action="/" class="m-3">
                {{ form.hidden_tag() }}
                <legend class="border-bottom mb-4">question will here</legend>
                
                <ul class="form-group">
                {{ form.optA.label(class="form-text mt-3") }}
                {{ form.optA(class="mx-2 optionA mt-3") }}
                </ul>

            </form>
        </fieldset>

        <div class="form-group m-3">
            {{ form.submit(class="btn btn-outline-info") }}
        </div>
        
    </div>



{% endblock %}

My python code in app.py

from flask import render_template, url_for, redirect, request
from flask import Flask
from flask_wtf import FlaskForm
from wtforms import SubmitField, BooleanField

app = Flask(__name__, template_folder='templates', static_folder='static')
app.config['SECRET_KEY'] = 'mysecretkey'

class Question(FlaskForm):
    optA = BooleanField('option A')
    submit = SubmitField('Submit')

@app.route('/')
@app.route('/home')
def home():
    return render_template('home.html')

@app.route('/exam', methods=['GET', 'POST'])
def exam():
    form = Question()
    if form.validate_on_submit():
        print("w")

    print(form.errors)        

    return render_template('exam.html', form=form)

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

The code inside if form.validate_on_submit() does not run when I press the submit button. When I attempted to print any errors using form.errors, it returned an empty dict.

>Solution :

There were two errors:

The action URL was wrong, not pointing at the right method
Submit button was outside the form

Here is corrected code:

{% block content %}
    <h3 class="pt-5 p-4">exam page</h3>

    <div class="form">
        <form method="POST" action="/exam" class="m-3">
            <fieldset class="form-group">
                {{ form.hidden_tag() }}
                <legend class="border-bottom mb-4">question will here</legend>
                
                <ul class="form-group">
                {{ form.optA.label(class="form-text mt-3") }}
                {{ form.optA(class="mx-2 optionA mt-3") }}
                </ul>

                <div class="form-group m-3">
                    {{ form.submit(class="btn btn-outline-info") }}
                </div>
            </fieldset>
        </form>
    </div>

{% endblock %}