Question

我的代码遇到了一些问题。基本上我有以下问题：

JS

function {
    $.post( "form.php",function( data ) {
        $("#div_element").html( data );
    } );
}

$(document).ready(function() {
    $('#mybtn').on('click', function() {
        $('#myform').bootstrapValidator('validate');
    });
});


$(document).ready(function() {
    $('#myform').bootstrapValidator({
        framework: 'bootstrap',
        excluded: [':disabled', ':hidden', ':not(:visible)'],
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            subject: {
                validators: {
                    notEmpty: {
                        subject: 'This field is required'
                    }
                }
            }
        }
    })

    .on('success.form.bv', function(e) {
        //do something
    });
});

PHP （form.php）

<form id="myform">
<div class="form-group">
<label class="col-sm-2 control-label">Subject</label>
<div class="col-sm-3">
    <input type="text" class="form-control" name="subject" id="subject">
</div>
</div>
<div class="form-group">
<div class="col-sm-2 col-sm-offset-2">
    <button type="button" id="mybtn" class="btn btn-default">Send</button>
</div>
</div>

HTML

<div id="div_element"> 

</div>

好的，事情是在我的html代码中通过ajax加载表单之后按钮没有在点击时验证表单，所以，我一直在寻找各处，我发现了一些相关的东西代表团，但不幸的是没有成功。

例如：

$(document).ready(function() {
    $('#div_element').on('click','#mybtn', function() {
        $('#myform').bootstrapValidator('validate');
    }); 
});

那么，是否有人知道如何在加载之后验证表单，如新内容在HTML代码中通过带有 formvalidatio.io插件？

谢谢。

Answer 1

我遇到了同样的问题，来到这里却很沮丧，没有答案。经过几个小时的尝试，我把它整理出来了。

使用 AJAX（通过 axios）我在页面上插入表单和 JS 使用：

$("#content_area").html(response.data);

为了让JS看到新的表单，我最终理清了需要等待DOM更新。不能使用 document.ready，因为文档已经准备好了。无法使用 DOM 加载命令，因为 DOM 已加载。最终，我最终使用了一个 defer 函数来让它工作。

function defer(method) {
    if (window.jQuery) {
        method();
    } else {
        setTimeout(function() { defer(method) }, 50);
    }
}

然后是表单验证器代码：

defer(function () {
    $('#my_form').formValidation({
        ...
    })
})

这允许 DOM 完全加载，并且 formValidation 可以找到它，然后工作。

formValidation.io在通过jquery post加载表单后不起作用

1 个答案: