Jquery 表单提交并带有引导模式确认

2024-03-14

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

我需要将模式放入提交处理程序中吗?

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

你的问题不清楚;

当我提交表单时,我想要模式来确认表单提交。

如果您想在表单提交后显示模式,则需要使用 Ajax 提交表单,否则一旦表单在验证后提交,就无法显示模式窗口but如果您希望在表单验证之后但在表单提交之前显示模式,以下解决方案将起作用。

这是在验证表单输入并提交后显示确认 BS Modal 的方法form来自确认 BS Modal。所需的库是

  • 引导程序
  • 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 验证

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

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

工作示例 http://jsfiddle.net/evuoo2py/1/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery 表单提交并带有引导模式确认 的相关文章

随机推荐