The validation issue in the email field is causing the is-valid effect to appear incorrectly. Although the email format is not valid (not 'gmail.com' format), a green outline and checkmark are displayed. How can I adjust this to work properly like the password field?
<form action="/members/new" role="form" method="post"
class="was-validated" th:object="${memberFormDTO}" novalidate>
<h2 class="mb-3">Sign Up</h2>
<hr class="my-4">
<div class="row g-3">
<div class="col-12">
<label th:for="name" class="form-label">Name</label>
<input type="text" th:field="*{name}" class="form-control"
placeholder="name" required>
<div th:if="${#fields.hasErrors('name')}"
th:errors="*{name}"
class="invalid-feedback">
</div>
</div>
<div class="col-12">
<label th:for="email" class="form-label">Email</label>
<input type="email" th:field="*{email}" class="form-control"
placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dca5b3a99cb9a4bdb1acb0b9f2bfb3b1">[email protected]</a>" required pattern="^[\w-.]+@([\w-]+\.)+[\w-]{2,}$">
<div th:if="${#fields.hasErrors('email')}"
th:errors="*{email}"
class="invalid-feedback">
</div>
</div>
<div class="col-12">
<label th:for="password" class="form-label">Password</label>
<input type="password" th:field="*{password}" class="form-control"
placeholder="At least 8 characters" required>
<div th:if="${#fields.hasErrors('password')}"
th:errors="*{password}"
class="invalid-feedback"gt;
</div>
</div>
<div class="col-12">
<label th:for="address" class="form-label">Address</label>
<input type="text" th:field="*{address}" class="form-control"
placeholder="1234 Main St" required>
<div th:if="${#fields.hasErrors('address')}"
th:errors="*{address}"
class="invalid-feedback">
</div>
</div>
<button class="btn btn-primary btn-dark btn-lg col-6" type="submit">Sign Up</button>
</div>
</form>
Looking to resolve the email validation issue.