带有引导模式确认的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 模态并从确认 BS 模态提交 form 的方式.所需的库是

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>

引导模式

<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屋！