1

動的に生成されたさまざまな (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();

私は何が欠けていますか？

4

1 に答える 1

1

もちろん、答えは非常に簡単でした：

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

ページをリロードせずに同じフォームを再利用する前に呼び出す必要があります。

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

resetHTMLフォーム ボタンと同じように、フィールドをクリアすることだけが目的であるため、ニシンでした。

于 2016-10-08T21:14:56.037 に答える