Boostrap 5, is-valid and empty field howto? - bootstrap-5

Question

From the documentation (it's what I've understood): when a form is posted to our server, we check it, if it's not valid, me return it. In such case, we must add class="was-validated" to the form, and we me must precise for all fields, whether it's good (add class is-valid) or not (add class is-invalid).
In our case, we do accept empty fields as valid. So we return some fields with class is-valid and because the fields are empty, bootstrap still shows the red outline, not the green, like this:
The form code is :
<form action="" method="post"
class="was-validated" novalidate>
<div class="row mb-3">
<label for="id_content2" class="col-sm-2 col-form-label">Content2</label>
<div class="col-sm-10">
<input type="text" name="content2" class="form-control is-valid"
required id="id_content2" aria-describedby="content2" />
<div class="valid-feedback"> Valid </div>
</div>
</div>
</form>
What am I doing wrong? What is the solution to consider some empty fields as valid?

Answer 1

It seems like that the "is-valid" is being added when the form is returned to the user but the field is empty. That would explain the behaviour at least...
One solution to consider an empty field as valid is to remove the "required" attribute from the input field and check if the field is empty on the server side before processing the form.