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="you@example.com" 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

The is issue in your code the email input field is not dynamically apply the 'is-invalid' class when email is invalid. This code should be helpful for you.

<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="you@example.com" required pattern="^[\w-.]+@([\w-]+\.)+[\w-]{2,}$"
                   th:classappend="${#fields.hasErrors('email')} ? ' is-invalid' : ''">
            <div th:if="${#fields.hasErrors('email')}" th:errors="*{email}" class="invalid-feedback">Please enter a valid email address.</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>

changes in my code: Added th:classappend="${#fields.hasErrors('email')} ? ' is-invalid' : ''" to apply the 'is-invalid' email or not also.

Hopefully this will be work for you, Thanks.