Подтвердить регистрационную форму в модальной и отправить данные в базу данных

В моем модальном режиме у меня есть форма регистрации с полями имени, адреса электронной почты и пароля. Пока я использую только ajax, я могу добавить свои данные. Теперь я попытался с помощью bootstrap validator.js проверить данные пользователя. После того, как мои данные не сохранены в базе данных, есть какая-то связь между этим validator.js и ajax. Здесь я прилагаю изображение. После того, как я нажимаю на кнопку отправить, оно показывает вот так

Если кто-нибудь знает решение, пожалуйста, помогите мне! заранее спасибо

Вот мой код

вызов функции addlistener для проверки формы

addEventListener('load', prettyPrint, false);

$(document).ready(function () {
$('#registration').submit(function (event){
event.preventDefault();
var username = $('#username').val();
var emailid = $('#emailid').val();
var datas="username="+username+"&emailid="+emailid;
$.ajax
({
type:"POST",
url: "register.php",
data: datas
}).done(function(data) {
$('#register_alert').append(
'<div class="alert alert-danger text-center">' +
'<button type="button" class="close" data-dismiss="alert">' +
'&times;</button>' + data + '</div>');
});
});
});

И мой HTML-код с модальным

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Create Account</h4>
</div>
<div class="modal-body row">
<div id="register_alert"></div>
<div class="col-md-6 ">
<form id="registration">
<label>Username</label>
<div class="left-inner-addon ">
<i class="icon-user"></i><input type="text" class="form-control" placeholder="Username" name="username" id="username" data-validation="length alphanumeric" data-validation-length="min4" />
</div>
<br>
<label>Email ID</label>
<div class="left-inner-addon ">
<i class="icon-envelope"></i>
<input type="email" class="form-control" placeholder="Email ID" name="emailid" id="emailid" ></div>
<br/>
<div id="reg">
<button class="btn btn-theme btn-block" href="#" id="register" type="submit"><i class="fa fa-lock"></i>REGISTER</button>
</form>
</div>

И мой код валидатора

$('#registration').validate({
rules: {
username: {
required: true,
required: true
},

username: {
minlength: 6,
required: true
},

emailid: {
required: true,
email: true
},

},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {
element
.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});