Jquery Form submit with bootstrap modal confirmation

问题

I have a form (Bootstarp3) with jquery form validation plugin. Now I want to submit the form after validating the form and when I submit the form, I want modal to confirm the form submit. How can I do that?

Do I need to put the modal within submit handler?

$("#dischargeform").validate({ submitHandle : { ??? } }).

回答1:

Your question is unclear;

when I submit the form, I want modal to confirm the form submit.

If you want to show the modal after the form submit then you need to submit the form with Ajax otherwise once the form submitted after validation there is no possible way to show a modal window but if you are looking to show the modal after form validation but before form submission, following solution will work.

This is how you can show confirmation BS Modal after validating form inputs and submit form from confirmation BS Modal. Required libraries are

Bootstrap
jQuery Form Validation

HTML Form

<form action="" id="dischargeform" method="post" name="" class="">
        <p>
            <label for="firstname">Firstname</label>
            <input id="firstname" name="firstname" type="text" class="form-control">
        </p>
        <p>
            <label for="lastname">Lastname</label>
            <input id="lastname" name="lastname" type="text" class="form-control">
        </p>
        <p>
            <input class="btn btn-primary" type="submit" value="Submit">
        </p>
    </fieldset>
</form>

Bootstrap Modal

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                 <h3 id="myModalLabel3">Confirmation Heading</h3>

            </div>
            <div class="modal-body">
                <p>Are You Sure You want To submit The Form</p>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close This Modal</button>
                <button class="btn-primary btn" id="SubForm">Confirm and Submit The Form</button>
            </div>
        </div>
    </div>
</div>

jQuery Validation

Yes you have to put the modal within submit handler.

$("#dischargeform").validate({
    rules: {
        firstname: "required",
        lastname: "required",
    },
    messages: {
        firstname: "Please enter your firstname",
        lastname: "Please enter your lastname",
    },
    submitHandler: function (form) {
        $("#myModal").modal('show');
        $('#SubForm').click(function () {
            form.submit();
       });
    }
});

Working Example

来源：https://stackoverflow.com/questions/32666100/jquery-form-submit-with-bootstrap-modal-confirmation

标签

jquery

validation

modal-dialog