Validate Registration Form in Modal And Submit data in database

Question

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

Answer 1

There is nothing wrong with your code but the approach is wrong, you are using jQuery validation plugin to validate form and Ajax method call separately, what you could use Ajax method call $.ajax inside submithandler and the jQuery validate plugin will invoke the submit handler if the validation has passed.

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