Question

我有两个模态窗口，第一个窗口的表单带有验证器（http://1000hz.github.io/bootstrap-validator），第二个窗口的文本类似于＆＃34;感谢发布。＆＃34;我为输入按钮编写了这段代码：

<input data-dismiss="modal" data-toggle="modal" data-target="#thanks" type="submit" value="Отправить" class="btn btn-primary btn-block btn-md button-space">

但是当我点击此按钮时，第一个窗口关闭而不检查验证。我该如何解决这个问题？

Answer 1

我认为你不需要第二个模态来显示信息。验证后，您可以使用javascript函数替换模态体类的html来显示消息。

->unsigned()

Answer 2

没有太多代码可以用来解决问题的确切答案;

当我点击此按钮时，第一个窗口关闭而不检查验证

 <input data-dismiss="modal" data-toggle="modal" data-target="#thanks" type="submit" value="Отправить" class="btn btn-primary btn-block btn-md button-space">

这可能有两个原因，

验证插件未与表单
data-dismiss="modal" data-toggle="modal" data-target="#thanks"关闭模式并且不让验证插件执行它的工作

你的第二个问题，如何在通过验证后才打开第二个bootstrap3模态窗口

首先删除data-dismiss="modal" data-toggle="modal" data-target="#thanks"，因为它关闭了表单模式，并通过检查表单是否与验证插件正确绑定来修复验证问题。
如果成功条件第二次绑定验证插件中的上述按钮，那么如果验证成功则显示在第二模态中的谢谢你注意。

SideNote：如果你没有通过Ajax发布表单，这一切都没用，因为在验证表单提交和刷新页面之后没有Ajax而且Thankyou模式只显示几秒钟

以下是示例代码;

来自

的模态

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="modal-title">Modal Form</h4>
            </div>
            <div class="modal-body">
                <form id="myform2" class="form-horizontal" role="form" method="POST" action="#">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label class="control-label popup-label">Full Name</label>
                            <input required type="text" class="form-control" name="fullname" value="">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" name="submitButton" class="btn btn-primary" id="Validate">Validate</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

表单验证

$('#myform2').bootstrapValidator({
    excluded: ':disabled',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            fullname: {
                validators: {
                    notEmpty: {
                        message: 'The Full Name field is required'
                    },
                    stringLength: {
                        min: 5,
                        max: 15,
                        message: 'The Full Name must be more than 5 and less than 15 characters long'
                    },
                }
            }
        },
      submitButtons: '#Validate'
    }).on('success.form.bv', function(e) {
             e.preventDefault();
            $("#ThanksModal").modal('show'); //show popup with thankyou note
});

如果您在上方检查，则提交按钮的格式为Validate，并在验证插件submitButtons: '#Validate'中绑定，成功条件为'success.form.bv'，ThanksModal仅显示验证是否成功。

验证后使用Thankyou Note进行模态

<div id="ThanksModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="modal-title">Modal Form</h4>
            </div>
            <div class="modal-body">
                <h4>Thank You Comes Here After Validation</h4> 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
            </form>
        </div>
    </div>
</div>

希望这有助于

Fiddle Example

如何在通过验证后才打开第二个bootstrap3模态窗口？

2 个答案: