jQuery验证-只显示最后一个验证字段的错误消息

Question

如何防止在提交表单时显示多条错误消息？

我只想显示最后一个验证字段的错误消息：password。我已经尝试使用errorPlacement，正如在另一篇文章中所建议的那样：jQuery验证-只显示一条错误消息和$('.alert').remove();，但没有成功。

到目前为止我得到的：

<script>
let form = $('#login');
$('#login').validate({
onkeyup: false,
onclick: false,
rules: {
username: {
required: true
},
password: {
required: true
}
},
errorPlacement: function(error) {
$('.alert').remove();
let div = $(
'<div class="alert alert-warning alert-dismissable">n' +
'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>n' +
'<h4><i class="icon fa fa-warning"></i>Opgepast!</h4>n' +
'<p>' + error.text() + '</p>n' +
'</div>'
);
div.insertBefore(form);
},
messages: {
username: {
required: "Gelieve een gebruikersnaam in te vullen."
},
password: {
required: "Gelieve een wachtwoord in te vullen."
}
}
});
</script>

Answer 1

根据@Sparky的建议将errorPlacement更改为showErrors。结果：

showErrors: function(object) {
$('.alert').remove();
let amount = Object.keys(object).length;
if(amount > 0){
let key = Object.keys(object)[0];
let value = object[key];
let div = $(
'<div class="alert alert-warning alert-dismissable">n' +
'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>n' + 
'<h4><i class="icon fa fa-warning"></i>Opgepast!</h4>n' +
'<p>' + value + '</p></div>');
div.insertBefore(form);
}