Question

我有一个带有jquery表单验证插件的表单（Bootstarp3）。现在我想在验证表单后提交表单，当我提交表单时，我希望模态确认表单提交。我怎么能这样做？

我是否需要将模态放在提交处理程序中？

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

Answer 1

你的问题不清楚;

当我提交表单时，我希望modal确认表单提交。

如果你想在表单提交后显示模态，那么你需要用Ajax提交表单，否则一旦表单在验证后提交，就没有办法显示模态窗口但是如果你希望在表单验证之后但在表单提交之前显示模式，以下解决方案将起作用。

这是在验证表单输入后显示确认BS模态并从确认BS模式提交<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>的方法。

是必需的库

自举
jQuery表单验证

HTML表单

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

Bootstrap Modal

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

是的，你必须将模态放在提交处理程序中。

{{1}}

Working Example

Jquery表单提交引导模式确认

1 个答案: