How to not validate form on initial submission with wtforms and Flask in Python?

Question

Not sure how to exactly how to ask this. But, I am using flask and wtforms for a web page.

I have a web page, and when you click the initial button, I want the bootstrap render form to come up.

Then, when you submit on the form, certain data is passed.

I have this mostly done, but the problem is when you press the initial button, the program seems to detect a form being submitted. This is evident because it'll say "This field is required" as I have validators for the form. If I didn't have those validators, then an empty form data would be passed on.

I know I could probably easily do this with just having a totally different function for the form or a different web page, but I want to keep the same web page for this operation.

I think it has something to do with the button being a post method as well as calling a form...

from flask import Flask, render_template, request, redirect,  url_for
from flask_bootstrap import Bootstrap5
from flask_wtf import FlaskForm
from wtforms import StringField, IntegerField, SubmitField
from wtforms.validators import DataRequired
import csv
import requests

app = Flask(__name__)
app.config['SECRET_KEY'] = 'any secret string'
Bootstrap5(app)


class TaskForm(FlaskForm):
    task = StringField("Task", validators=[DataRequired()])
    location = StringField("Location", validators=[DataRequired()])
    points = IntegerField("Points",  validators=[DataRequired()])
    submit = SubmitField(label="Add Task")


@app.route('/')
def hello_world():
    return render_template("index.html")


@app.route('/todo', methods=['GET', 'POST'])
def to_do():
    task_form = TaskForm()
    with open("todo.csv", encoding='utf-8') as file:
        csv_data = csv.reader(file, delimiter=',')
        list_of_rows = []
        for row in csv_data:
            list_of_rows.append(row)
    if request.method == 'POST':
        if task_form.validate_on_submit():
            new_task = f"\n{task_form.task.data},{task_form.location.data},{task_form.points.data}"
            with open("todo.csv", "a") as fd:
                fd.write(new_task)
            return redirect(url_for('to_do', todo=list_of_rows, add_task=False, form=task_form))
        return render_template("todo.html", todo=list_of_rows, add_task=True, form=task_form)
    return render_template("todo.html", todo=list_of_rows, add_task=False, form=task_form)


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

Here's my HTML

{% extends 'base.html' %}
{% from 'bootstrap5/form.html' import render_form %}
{% block title %}All Cafes{% endblock %}

{% block content %}
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h1>All Cafes</h1>
<!--      <ul>-->
<!--        <li>1</li>-->
<!--        <li>2</li>-->
<!--      </ul>-->

      <table class="table" style="color: white">
        {% for row in todo %}
        <tr>
          {% for item in row %} {% if item[0:4] == "http" %}
          <td><a href="{{ item }}">Maps Link</a></td>
          {% else %}
          <td>{{ item }}</td>
          {% endif %} {% endfor %}
        </tr>
        {% endfor %}
      </table>

      <h1><a href="#">Add a new task!</a></h1>
      <form method="post">
        {{ form.csrf_token }}
      <input type="submit">
      </form>
      {% if add_task: %}
      {{ render_form(form, novalidate=True) }}
      {% endif %}
      <p><a href="#">Return to index page</a></p>
    </div>
  </div>
</div>

{% endblock %}