Question

我包括（多个实例）用于在不同的动态生成（jQuery）“对话框”中输入域名或IP地址的表单。第一个触发验证器，但后续的验证器似乎没有。验证器设置看起来大致如下：

function domainNamesPage(e){ 
    getHTML('spf-tool', 'spf4');
    nextButton.innerHTML = '<button class="btn">Next</button>';
    $( ".form_blocks:last-child" ).after(addButton);
    $( "#domainName" ).after(nextButton);
    $('#domainName').formValidation({
    framework: 'bootstrap',
    icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        server: {
            validators: {
                callback: {
                    message: 'The address is not valid',
                    callback: function(value, validator, $field) {

                            if ( pass !== me ) {
                                // error_object
                            }
                                return true;
                            }
                        }
                    }   
                }
            }
    });
}

在第一个对话框中，字段验证器按预期工作，但在随后的“对话”中似乎没有任何响应。

检查form元素本身：

$("form").each(function () {
        console.log(this);
});

第一个看起来像这样：

<form id="domainName" class="dmarc_form" autocomplete="on" action="" method="">

随后像这样：

<form id="domainName" class="dmarc_form fv-form fv-form-bootstrap" autocomplete="on" action="" method="" novalidate="novalidate">

按此顺序加载的依赖项：

https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://formvalidation.io/vendor/formvalidation/css/formValidation.min.css 
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
https://formvalidation.io/vendor/formvalidation/js/formValidation.min.js 
https://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js 
https://use.fontawesome.com/b66d6d44ad.js 
https://cdn.fontawesome.com:443/js/stats.js 
https://use.fontawesome.com/b66d6d44ad.css" media="all

HTML基本上是：

<form id="domainName" autocomplete="on" action="" method="">
    <div id="formGroup" class="form-group has-feedback">
        <div class="input_validate_box">
            <input class="form-control input_text bold" name="server" placeholder="Domain Name or IP 1" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAwZJREFUWAntVktoE2EQntlNugkltYoKgtDYrMdasQpFPOjBS7WmisWDoOBFEBE8Ciql2IsXEREEwYPWi4U+RMV6aY+tGkWK0NS0RjQ+KsVIbdrS7P5+G7qb3WRTY00EsT8k/7x2vsm8skQrZyUD/3sG2EjAI1Wtmk+LdhK8n0jUCqKMvDzJ4Q9wPuBRpHPNY2MJHgju9iXp/VMhqK48gAW8Mk0q5KuXW6o9pwF+rIBZOcWVOmuVHiA0uqEw8zwJMQJdUjDXg17nZkfM9yGfd9XlCJF6nxCi2SZuRAAiYBNkSCZ+ICnyyXA0+tEQiNZWue/ZyzPI1GVBwgg6e3yeE4dGR6eygsJUf2jL+pn0zBfLQlDA6czQML9SPHS4KRq1fhV3dWnQXOmtUf1o0A...1mYHGwTmYG9wcyey8ATlqDJj4NmF/u6gWlQJUukZr/mceTsCwPbrD0+MXcDt2tYt8TfDfbXqKU2jTtMBDBuwJU12ydvNylECZqmjELjpOTwRu8tMcZP/09ueAU1eE4jQ22Jc8jBmP7ho+QmzUNQiwjPGIsLeyB4rAHTkt+ZIJJVVLUExJazd4/fWLXcKDARHCZaALJsKGeBpY5UKpip0871ikDAFWy27ufQtPOf632HZLBIpLeVzyJimjRIM4XMEnVyBu9VhUAwjxIFizAwblykYkqpp4w10tfHi8XcPXskqSGmX9sQH5xQP70IQV9GI49jtLoGWMjZOAOeOt0Leti/++nMpPa/4+jcz8BPw4Pa6no/fzAAAAABJRU5ErkJggg=="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;" type="text">
        </div>
    </div>
</form>

除了$('#domainName').data('formValidation').resetForm();之外，还尝试更新这样的表单元素：

$('#domainName').removeClass('fv-form-bootstrap');
$('#domainName').removeClass('fv-form');
$('#domainName').removeAttr('novalidate');
$('#domainName').data('formValidation').resetForm();

我错过了什么？

Answer 1

答案当然很简单：

 $('#domainName').data('formValidation').destroy();

需要在重新使用相同表单之前调用，而不重新加载页面。

$('#domainName').data('formValidation').resetForm();

是一个红色的鲱鱼，因为所有要做的就是清除字段，就像HTML reset表单按钮一样。

动态启动BootstrapValidator ResetForm

1 个答案: