Ajax multiple firing errors during click on submit button

[rerraw]

I have this below code by Ajax. when the input field button is empty and then click on Send message button show error message Name is required until now not trouble but when another time tick on Sned message again (if also field is empty) then show error message again means show it two times.

I want when only show me one time if anyone clicked on Send message more than one time
How can do this?

jQuery(document).ready(function($) {

$('#contactForm').submit(function(event) {
    var bsnname    = $('#bsnname').val();
    if (bsnname == '') {
        $('#name-field').append('<em class="text-danger">Name is required.</em>');
    } else {
        $('#name-field em').fadeOut(1);
        if (bsnname.length <= 4) {
            $('#name-field').append('<em class="text-danger">Required at least 5 letters</em>');
        }
    }
    if (bsnname && (bsnname.length > 4)) {
        $.ajax({
            url: 'class-contact-inc.php',
            type: 'POST',
            data: {'bsnname': bsnname},
            dataType: 'json',
            cache: false
            success: function(data) {
                $('#success-msg').append('<p class="bg-success">Thank you! Your message has been successfully sent.</p>');
            },
        });
    } 
    event.preventDefault();
});
});

[rerraw]

Sorry i Solved my problem by using html instead of append