I am making a "bestelpagina" also known as an order page. I made my own error, if something wasn't right with the input. HTML 5 already has a sort of error like this, but I prefer my own one. My own one doesn't work, because the other one already does the job. I don't know how to remove the required attribute. This is my code.
<!DOCTYPE = "html">
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='styles/style.css') }}">
</head>
<body>
{% extends "base.html" %}
{% block content %}
<h1>Bestelpagina</h1>
<form action="" method="post">
{{ form.hidden_tag() }}
<p>
{{ form.firstname.label }}<br>
{{ form.firstname(size=32) }}<br>
{% for error in form.firstname.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</p>
<p>
{{ form.lastname.label }}
{{ form.lastname(size=32) }}
</p>
<p>
{{ form.street.label }}
{{ form.street(size=32) }}
</p>
<p>
{{ form.housenumber.label }}
{{ form.housenumber(size=32) }}
</p>
<p>
{{ form.postcode.label }}
{{ form.postcode(size=32) }}
</p>
<p>
{{ form.livingarea.label }}
{{ form.livingarea(size=32) }}
</p>
<p>
{{ form.country.label }}
{{ form.country(size=32) }}
</p>
<p>
{{ form.phonenumber.label }}
{{ form.phonenumber(size=32) }}
</p>
<p>
{{ form.email.label }}
{{ form.email(size=32) }}
</p>
<p>
{{ form.housenumber.label }}
{{ form.housenumber(size=32) }}
</p>
<p>
{{ form.delivery.label }}
{{ form.delivery(size=32) }}
</p>
<p>{{ form.submit() }}</p>
</form>
{% endblock %}
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->