How to show a bootstrap Modal Window on form submit using "submit handler" of jQuery Validate method?

Question

I have a form and am using the .validate method for validation of fields and form submission. I want to display a Bootstrap Modal Window on submit. Can some one please help me achieve this? Here is the code:

<form action="" method="post" id="registration" novalidate="novalidate" enctype="plain/text">

...

</form>

<div class="modal hide" id="myModal" data-backdrop="false">  
     <div class="modal-dialog">
        <div class="modal-content">      
          <div class="modal-body">

             ... Modal Window Content.. 

          </div>          
        </div>      
      </div>
</div>

$("#registration").validate({

        rules: {
            .....
        },

        messages: {
            ......
        },

        submitHandler: function(form){
            //alert("Thank you for registration..!");           
            form.submit();
        }

    }); 

Answer 1

You have to submit form in async request, and on success show the modal. eg

$("#registration").validate({

    rules: {
        .....
    },

    messages: {
        ......
    },

    submitHandler: function(form){
        $.ajax({
            url: $(form).action,
            method: $(form).method,
            data: $(form).serialize(),
            success: function() {
               $("#myModal").modal("show");
            }
        })
    }

});