1

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

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');
    }); 
});

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

谢谢你。

4

1 回答 1

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);
    }
}

然后是formvalidator代码：

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

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

于 2021-07-28T17:02:44.493 回答