jQuery validation - only show error message of last field validated

Question

How do I prevent that multiple error messages are shown when I submit a form?

I would like to display only the error message of last field validated: password . I've tried to use errorPlacement as suggested in a different post: jQuery validation - only show one error message and $('.alert').remove(); without success.

What I've got so far:

<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

Changed errorPlacement to showErrors as suggested by @Sparky. Result:

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