Duplicate error message printing if user click button multiple times

i am trying to validate user form input field using jQuery. it is validating correctly but error message showing multiple times if i clicked submit button multiple times.

it has to clear previous message before printing new one.

My JQuery Code is:

1. $(document).ready(function(){
2.     $('#createUserForm').unbind('submit').bind('submit', function(){
3.       var username = $("#userName").val();
4. 
   
5.       if(username == ""){
6.         $("#userName").after('<p class="text-danger">Username required ?</p>');
7.         $("#Username").closest('.form-group').addClass('has-error');
8.       }else{
9.         $("#userName").find('.text-danger').remove();
10.         $("#userName").closest('.form-group').addClass('has-success');
11.       }
12.       return false;
13.     });
14.   });

output is :

• Topic Participants

• shreeramsharma065

• jakecigar