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

Question

В моем модальном виде у меня есть регистрационная форма с полями имени, email, password.While, используя только ajax, я могу добавить свои данные. Теперь я попытался с помощью bootstrap validator.js, чтобы проверить пользовательские данные. После этого мои данные не хранятся в базе данных, есть ли какое-либо соединение между этим validator.js и ajax.Here i enclose image.После того, как я нажимаю кнопку, это выглядит так:

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

Вот мой код

вызов функции добавления слушателя для проверки формы

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

Answer 1

Нет ничего плохого в вашем коде, но подход неправильный, вы используете jQuery validation plugin для проверки формы и вызова метода Ajax отдельно, что вы можете использовать для вызова метода Ajax $.ajax внутри submithandler, а плагин jQuery validate будет ссылаться на обработчик отправки, если проверка прошло.

$('#registration').validate({ 
    rules: { 
     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'); 
    }, 
    submitHandler: function(form) { 
     $.ajax({ 
      type:"POST", 
      url: "register.php", 
      data: $(form).serialize(), 
      }).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>'); 
      }); 
    } 
});