Html Question posted in
Some basic documentation can be found here.

Html – E-mail validation is not working properly

image of form boxes

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

Tags:

2

Answers


  1. 0

    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="[email protected]" 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.

    Login or Signup to reply.
  2. 0

    To ensure proper email validation, you can update the pattern attribute in the email input field and ensure the Bootstrap validation classes are correctly used. The provided pattern looks generally correct, but I’ll provide a more precise one and ensure the surrounding code handles the validation properly.

    <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 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search