Html – E-mail validation is not working properly

In the screenshot above, the is-valid effect appears even though the email format is not valid (not ‘gmail.com’ format). This effect manifests as a green outline for the email box together with a green checkmark. How can I fix this so that it works correctly 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="[email protected]" 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">
                    </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>

I want to correct email validation