BootstrapValidator ResetForm в динамически
Я включаю (несколько экземпляров) форму для ввода доменных имен или IP-адресов в различные динамически генерируемые (jQuery) "диалоги". Первый запускает валидатор, но последующие, похоже, нет. Настройки валидатора выглядят примерно так:
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();
Что мне не хватает?
1 ответ
Ответ был, конечно, очень прост:
$('#domainName').data('formValidation').destroy();
Требуется вызвать до повторного использования той же формы без перезагрузки страницы.
$('#domainName').data('formValidation').resetForm();
Была красная сельдь, так как все, что нужно сделать, это очистить поля, как HTML reset
Кнопка формы.