jQuery表单提交与引导模式确认 [英] Jquery Form submit with bootstrap modal confirmation

问题描述

我有一个带有jquery表单验证插件的表单(Bootstarp3).现在，我想在验证表单后提交表单，当我提交表单时，我希望使用模式来确认表单提交.我该怎么办?

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 : { ??? } }).

推荐答案

您的问题不清楚；

当我提交表单时，我希望模式确认表单提交.

如果要在提交表单后显示模式，则需要使用Ajax提交表单，否则，一旦在验证后提交表单，就无法显示模式窗口.但是正在寻求在表单验证后但在提交表单之前显示模式，以下解决方案将起作用.

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.

这是在验证表单输入并从确认BS Modal提交form之后如何显示确认BS Modal的方法.所需的库是

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

• 引导程序
• jQuery表单验证

HTML表单

<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

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验证

是的，您必须将模式放入提交处理程序中.

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

工作示例

这篇关于jQuery表单提交与引导模式确认的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！