具有 Bootstrap 模态确认的 Jquery 表单提交

Question

我有一个使用jquery表单验证插件的表单(Bootstarp3)。现在我想在验证表单后提交表单，并在提交表单时弹出模态框以确认表单的提交。我该如何做？

我需要把模态框放在submit处理程序中吗？

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

- user3045457

---

你尝试了什么？展示一些代码以帮助我们。 - J Santosh

$("dischargeform").validate({ submitHandle : { ??? } }). 我需要把模态框放在提交处理程序内吗？ - user3045457

Answer 1

你的问题不清楚;

当我提交表单时，我想要一个模态框来确认表单提交。

如果您想在表单提交后显示模态窗口，则需要使用Ajax提交表单，否则一旦表单提交并验证通过，就没有可能显示模态窗口但是，如果您想在表单验证通过但在表单提交之前显示模态框，则下面的解决方案将起作用。

这是您可以在验证表单输入并从确认BS Modal提交form的方式后显示确认BS Modal的方法。所需的库为

• Bootstrap
• 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模态框

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

是的，您必须将模态框放在提交处理程序内。

$("#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

- Shehary

---

抱歉我的问题表述不够清晰，但是你给了我我所需要的确切答案。谢谢。 - user3045457

非常欢迎，您忘记将答案标记为正确 :) - Shehary

是的，我正在尝试点赞，但是我收到了一条消息：“感谢您的反馈！一旦您获得总计15声望，您的投票将改变公开显示的帖子分数。”。+1 - user3045457

这是SO政策，防止新用户进行垃圾投票，但在投票下方有一个勾选框，请勾选它，它将标记答案为正确。 - Shehary