使用jquery验证和bootstrap 5进行输入验证时的错误消息颜色

Question

编辑：我使用jquery验证和bootstrap 5来验证表单并显示错误消息。当我在没有电子邮件和密码的情况下登录时，每个字段的输入字段颜色都变为红色(电子邮件+密码(，来自电子邮件字段的颜色错误消息也变为红色，但来自密码字段的颜色错误消息没有改变颜色。

如果我在表单外点击，一切都如预期，两个字段中的所有错误消息颜色都变为红色

当我在没有密码和电子邮件数据的情况下登录时，把密码输入的错误颜色文本改为红色，就像电子邮件输入一样，有什么想法吗？

代码如下：

HTML文件的一部分：

***JS文件的导入如下，并按预期工作：

<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文件：

$(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

我遇到了同样的问题，我这样解决了：

$.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
});