You can use a condition to check if the form.errors contains at least an error by checking the truthiness, so:

{% if form.errors %}
    <div class="field5">
        {{ form.errors }}
    </div>
{% endif %}

So on my login page, I see a red line(the border property of class field5 from CSS) appear above the input fields before actually putting in the credentials, I want it to disappear until a user actually hits an error. when someone hits an error it works fine, just that the red line is constant before an actual error. thnx for any help.

  <div class="field5">
    {{form.errors}}
  </div>

.field5 {
  border: 2px solid #d10a0a;
  font-family: Circular Std Book;
  background-color: #d10a0a;
  color: white;
  border-radius: 10px;
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 10px;
}