Search code examples
jquerybootstrapvalidatorjqbootstrapvalidation

BootstrapValidator ResetForm in Dynamically


I'm including (multiple instances of) a form for inputting Domain Names or IP addresses in different dynamically generated (jQuery) "dialogues". The first one triggers the validator, but subsequent ones don't seem to be. Validator settings look roughly like this:

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

On the first dialogue the field validator works as expected, but on subsequent "dialogues" it doesn't seem to be having any response.

Upon examining the form elements themselves:

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

the first looks like this:

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

Subsequently like this:

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

The dependencies loaded in this order:

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 

And the HTML is basically:

<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>

In addition to $('#domainName').data('formValidation').resetForm(); have also tried updating the form elements like this:

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

What am I missing?


Solution

  • Answer was of course very simple:

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

    Needs to be called prior to reusing the same form without page reload.

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

    Was a red herring, as all that is meant to do is clear the fields, just like an HTML reset form button.