验证模态中的注册表单并在数据库中提交数据

In my modal I have registration form with fields of name,email,password.While using ajax alone i can add my data.now i tried with bootstrap validator.js to validate the user datas.After that my datas are not stored in database is there any connection between that validator.js and ajax.Here i enclose image.After i click submit it is showing like that

If anybody know the solution please help me!! Thanks in advance

Here is my code

addlistener function call for form validation

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

And My Html Code WIth Modal

<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>

And My Validator Code

$('#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');
      }
});