Error message color on input validation using jquery-validation and bootstrap 5

Question

Edited: I am using jquery-validation and bootstrap 5 to validate the form and show errors messages. When I hit login without email AND password the input field color became red for each field (email + password) and the color error message from the email field became red too but the color error message from the password field did not change the color.

If I click outside form, everything works as expected, all error message colors from both fields changed to red.

Any idea to changing the error color text of the password input to red like the email input when I hit login without password and email data?

The code is below:

part of HTML file:

*** import of JS file is the following and work as expected:

 <script type="text/javascript" src="{% static 'js/registration/login.js' %}"></script>


    <div class="container" style="max-width: 600px">
                <form method="post" action="{% url 'login' %}" id="loginForm" name="loginForm" class="py-3">
                    {% csrf_token %}
                     <div class="row justify-content-center">
                        <label for="email" class="col-form-label fs-5 fw-bolder">Email :</label>
                        <input type="email" id="email" name="email" class="form-control" placeholder="Required..." maxlength="254" autocomplete="username" required />
                    </div>

                    <div class="row justify-content-center">
                        <label for="password" class="col-form-label fs-5 fw-bolder">Password :</label>
                        <input type="password" id="password" name="password" class="form-control" placeholder="Required..." minlength="3" maxlength="254" autocomplete="off" required autofocus/>
                    </div>

                    <div class="row pt-4 mx-auto col-md-3">
                        <button type="submit" id="login" name="login" class="btn btn-outline-primary" value="login">Log In</button>
                    </div>
                </form>
            </div>

JS file:

$(document).ready(function() {
$.validator.setDefaults({
    highlight: function(element) {
        $(element).addClass("is-invalid").removeClass("is-valid");
    },
    unhighlight: function(element) {
          $(element).addClass("is-valid").removeClass("is-invalid");
    },
});

$("#loginForm").validate({
     rules: {
         email: {
             required: true,
             email: true
         },
        password: {
            required: true,
            minlength:  3
        }
    },
    messages: {
        email: {
            required: "An email address is required to log in.",
            email: "Invalid email address"
        },password: {
            required: "A password is required to log in.",
            minlength: jQuery.validator.format("At least {0} characters required")
        }
    }
}) 

Answer 1

I had the same problem, I fixed it like this:

$.validator.setDefaults({
    highlight: function(element) {
        $(element).addClass("is-invalid").removeClass("is-valid");
    },
    unhighlight: function(element) {
          $(element).addClass("is-valid").removeClass("is-invalid");
    },

    //add
    errorElement: 'span',
    errorClass: 'text-danger',
    errorPlacement: function(error, element) {
        if(element.parent('.form-control').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
    // end add
});