Jquery表单提交引导模式确认

Question

我有一个带有jquery表单验证插件的表单(Bootstarp3).现在我想在验证表单后提交表单,当我提交表单时,我希望模态确认表单提交.我怎样才能做到这一点？

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

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

Answer 1

你的问题不清楚;

当我提交表单时,我希望模态确认表单提交.

如果你想在表单提交后显示模态,那么你需要使用Ajax提交表单,否则一旦验证后提交的表单没有可能的方式来显示模态窗口但是如果你想在表单验证后显示模态但是在表单提交之前,以下解决方案将起作用

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

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

工作实例