Javascript jQuery验证-仅显示上次验证字段的错误消息

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

我只想显示最后一个验证字段的错误消息：

password

。我曾尝试使用另一篇帖子中建议的

errorPlacement

：和

$（'.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>


让form=$（'#login'）；
$（“#登录”）。验证({
onkeyup:false，
onclick:false，
规则：{
用户名：{
必填项：true
},
密码：{
必填项：true
}
},
errorPlacement:函数（错误）{
$（'.alert'）.remove（）；
设div=$(
“\n”+
“×\n”+
“opgepass！\n”+
“”+错误。text（）+”
\n+
''
);
插入之前的div.insertBefore（表格）；
},
信息：{
用户名：{
要求：“格丽芙·伊恩·格布里克斯纳姆在瓦伦。”
},
密码：{
必选：“格丽芙·伊恩·瓦赫特伍德在特瓦伦。”
}
}
});
根据@Sparky的建议，将
错误位置
更改为
淋浴错误
。结果:

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

错误：函数（对象）{
$（'.alert'）.remove（）；
让数量=对象。键（对象）。长度；
如果（金额>0）{
让key=Object.keys（Object）[0]；
让值=对象[键]；
设div=$(
“\n”+
“×\n”+
“opgepass！\n”+
“”+值+”
）；
插入之前的div.insertBefore（表格）；
}
当您单击“提交”按钮时，两条错误消息将依次显示。密码消息位于第二位，因此它是在表单提交后显示的消息。这表示我个人无法重现该问题。是的，正确，提交后，将显示所需的错误消息。但是，当我单击
用户名
字段以输入一个值，似乎
onclick:false
不再起作用，因为它会立即显示适用于该字段的错误消息。我是否配置了错误？基本上，我只希望在按下提交按钮时进行验证，如果有错误消息，则只显示最后一条。显示足够的代码以重现此问题。表单的HTML标记在哪里？我想您可能希望返回并返回。如果您希望消息显示在表单之外，您不会使用
errorPlacement
-这是用于表单中的自定义放置，例如输入之前或之后。请查看
showErrors
，以及其他选项ns用于处理消息和消息列表。这很简单。考虑到您描述的问题：“我只想显示最后验证字段的错误消息”-最初填写表单时如何？您已经禁用了
onkeyup
和
onclick
，因此现在基本上禁用了所有交互式验证，只是为了阻止下一条消息出现。解决此问题的最佳方法是正确使用回调函数，例如
showErrors
，而不是
errorPlacement
。我已更新了答案。谢谢您的建议。