验证不适用于弹出窗口

时间:2016-06-21 13:52:05

标签: jquery validation bootstrap-modal

使用bootstrapValidator(时,如果在弹出窗口中显示的表单上触发它,则验证永远不会起作用,甚至触发。

我知道我在jQuery中使用document.ready()上的方法,因此尝试切换到.focusout.blur,但它们也不起作用。有什么想法吗?

jQuery -

jQuery(document).ready(function() {
    jQuery('#brochure-form').bootstrapValidator({
    //THE CODE   
    })
    .on('success.form.bv', function(e) {
    //THE CODE
    });
});

HTML -

<form action="........" method="post" class="wpcf7-form well form-horizontal" novalidate="novalidate" id="brochure-form">
    <div style="display: none;">
        <input type="hidden" name="_wpcf7" value="408">
        <input type="hidden" name="_wpcf7_version" value="4.4.2">
        <input type="hidden" name="_wpcf7_locale" value="en_US">
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <div class="col-md-12 inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><span class="wpcf7-form-control-wrap text-680"><input type="text" name="text-680" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false" placeholder="Name"></span>
                </div>
                <p></p>
            </div>
            <p></p>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <div class="col-md-12 inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span><span class="wpcf7-form-control-wrap email-80"><input type="email" name="email-80" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email form-control" aria-required="true" aria-invalid="false" placeholder="Email"></span>
                </div>
                <div class="wpcf7-response-output wpcf7-display-none"></div>
            </div>
        </div>
    </div> </form>

1 个答案:

答案 0 :(得分:0)

如果您的表单嵌套在另一个表单中,则验证程序将无效。 您可以在一个页面上拥有多个表单,但不应嵌套它们。

如果是这种情况,请删除嵌套表单。