Twitter Bootstrap Question posted in

Twitter bootstrap – bootstrap modal registration form validate and submit

i am trying to validate a bootstrap modal registration form and submit to PHP page. bellow is my jquery code. i am new to jquery so could’t able to make it

<script>
    $(function () {
//twitter bootstrap script
        $("button#submit").click(function () {
            $(document).ready(function () {
                $('#register-form').formValidation({
                    framework: 'bootstrap',
                    excluded: ':disabled',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        rfullname: {
                            validators: {
                                notEmpty: {
                                    message: 'The username is required'
                                }
                            }
                        },
                        rpassword: {
                            validators: {
                                notEmpty: {
                                    message: 'The password is required'
                                }
                            }
                        }
                    }
                });
            });

            $.ajax({
                type: "POST",
                url: "process.php",
                data: $('form#register-form').serialize(),
                success: function (msg) {
                    //$("#thanks").html(msg)
                    $("#login-modal").modal('hide');
                    bootbox.alert(msg);
                    $('#register-form').each(function () {
                        this.reset();
                    });
                },
                error: function () {
                    alert("failure");
                }
            });
        });
    });
</script>

and the registration form is 

<form id="register-form" style="display:none;" data-async  method="post" role="form">
   <div class="modal-body">
      <input id="rfullname" class="form-control" name="mname" type="text" placeholder="Your Full Name">
      <input id="remail" class="form-control" name="email" type="text" placeholder="E-Mail">
      <input id="rpassword" class="form-control" name="password" type="password" placeholder="Password">
   </div>
   <div class="modal-footer">
      <div>
         <button type="submit" name="submit" id="submit" class="btn btn-primary btn-lg btn-block">Register</button>
      </div>
      <div>
         <button id="register_login_btn" type="button" class="btn btn-link">Log In</button>
         <button id="register_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
      </div>
   </div>
</form>

this form should submit the values after validation.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    i found answer to my question

    <script>
$(function() {

  $('form[name="registor"]').find('input,select,textarea').not('[type=submit]').jqBootstrapValidation({

    submitSuccess: function ($form, event) {

      $.ajax({
                type: "POST",
            url: "process.php",
            data: $('form#register-form').serialize(),
                success: function(msg){
          // just to confirm ajax submission
          $("#login-modal").modal('hide');
                    bootbox.alert(msg);
                    $( '#register-form' ).each(function(){
                     this.reset();
                     });},
            error: function(){
                alert("failure");
                }
                }); 

      // will not trigger the default submission in favor of the ajax function
      event.preventDefault();
    }

  });

});
</script>

    thank you all who try to help me.


  2. 0

    Try this.

      <script>
            $(document).ready(function() {
                     $('#register-form').formValidation({
                        framework: 'bootstrap',
                        excluded: ':disabled',
                        icon: {
                            valid: 'glyphicon glyphicon-ok',
                            invalid: 'glyphicon glyphicon-remove',
                            validating: 'glyphicon glyphicon-refresh'
                        },
                    fields: {
                        rfullname: {
                            validators: {
                                notEmpty: {
                                    message: 'The username is required'
                                }
                            }
                        },
                        rpassword: {
                            validators: {
                                notEmpty: {
                                    message: 'The password is required'
                                }
                            }
                        }
                    },
                    submitHandler : function(validator, form, submitButton) {
                                        saveData();
                                    }
                });
             });

               function saveData(){
                        $.ajax({
                            type: "POST",
                        url: "process.php",
                        data: $('form#register-form').serialize(),
                            success: function(msg){
                                  //$("#thanks").html(msg)
                                $("#login-modal").modal('hide');
                                bootbox.alert(msg);
                                $( '#register-form' ).each(function(){
                                 this.reset();
                                 });    
                            },
                        error: function(){
                            alert("failure");
                            }
                            });
              }
    </script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search