dongshi2836
dongshi2836
2016-02-10 10:00

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

已采纳

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 thatenter image description here

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');
      }
});
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • doudun1934 doudun1934 5年前

    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>');
                });
        }
    });
    
    点赞 评论 复制链接分享