Onchange Event doesn't work after validation

Question

My problem is that when I press the Next button on my Select it displays the select as invalid, but then does not execute the onchange function. So its not possible to go on. Can you help me why this is so?

UPDATE: If I first change the select to an option with a value all works well. You can see it here.

Simple Move on and when the select appears don't enter anything and click "go on". Parsley will say its invalid you have to select something. But when I select something the onchange event doesn't show me the hidden fields.

Without parsley all works fine. So the problem is that the on chance Event doesn't fire anymore after the parsley validation. Any Tips?

SELECT HTML

<h4 class="text-uppercase">Ihr genehmigter Vertrag wartet auf Sie:</h4>
                                <p class="text-left">Sie bestimmen wie Sie Ihren Vertrag erhalten möchten.</p>
                                <div class="single-element-widget mt-30">   
                                        <div class="default-select">
                                                <select class="form-control border" id="bezahlart" name="bezahlart" required onchange="formupdate();" style="width: 100%;white-space: normal;">
                                                        <option value="">Wie möchten Sie Ihren Vertrag bekommen ?</option>
                                                        <option value="NN1">Vertrag - per Nachname - nur Deutschland</option>
                                                        <option value="Transfer1">Vertrag - nach Überweisung (Kontodaten per E-Mail)</option>
                                                        <option value="Transfer2">Vertrag - nach Überweisung (Kontodaten per SMS)</option>
                                                        <option value="Pick1">Vertrag - selbst in Zürich abholen</option>
                                                </select>
                                        </div>
                                </div>

                                <div class="col-12 pt-3" id="NN" style="display: none;">
                                        <p class="text-danger"><i class="fas fa-exclamation-circle"></i> WICHTIG: Nachnahme wird nur für Kunden angeboten, welche ihren Wohnsitz in Deutschland haben.</p>
                                        <p class="text-success" id="NachnahmeDE"><i class="fas fa-exclamation-circle"></i> Bitte geben Sie an zu wann Sie Ihren Vertrag erhalten wollen.</p>
                                        <input type="text" id="cashondelivery" name="cashondelivery" class="form-control text-center" placeholder="tt.mm.jjjj" pattern="(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}"/>
                                </div>

JS PARSLEY

<script type="text/javascript">
$('.form-signin').parsley();
$(function () {
    var $sections = $('.form-section');

    console.log($('.form-section').index());

    function navigateTo(index) {
        // Mark the current section with the class 'current'
        $sections
            .removeClass('current')
            .eq(index)
            .addClass('current');
        // Show only the navigation buttons that make sense for the current section:
        $('.form-navigation .previous').toggle(index > 0);
        var atTheEnd = index >= $sections.length - 1;
        $('.form-navigation .next').toggle(!atTheEnd);
        $('.form-navigation [type=submit]').toggle(atTheEnd);
    }

    function curIndex() {
        // Return the current index by looking at which section has the class 'current'
        return $sections.index($sections.filter('.current'));
    }

    // Previous button is easy, just go back
    $('.form-navigation .previous').click(function () {
        navigateTo(curIndex() - 1);
    });

    // Next button goes forward iff current block validates
    $('.form-navigation .next').click(function () {
        $('#pathOne').removeClass('active');
        $('#pathTwo').addClass('active');

        $('.form-signin').parsley().whenValidate({
            group: 'block-' + curIndex()
        }).done(function () {
            navigateTo(curIndex() + 1);
        });
    });

    // Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc.
    $sections.each(function (index, section) {
        $(section).find(':input').attr('data-parsley-group', 'block-' + index);
    });
    navigateTo(0); // Start at the beginning
});

ONCHANGE FUNCTION

function formupdate() {
var selectedPackage = document.getElementById("bezahlart").value;
if ( selectedPackage == 'NN1' ) {
     document.getElementById('NN').style.display = "block";
     document.getElementById('Transfer_mail').style.display = "none";
     document.getElementById('Transfer_phone').style.display = "none";
     document.getElementById('Pick').style.display = "none";
     document.getElementById("cashondelivery").setAttribute("required","");
     document.getElementById("advancepayment_mail").removeAttribute("required","");
     document.getElementById("advancepayment_phone").removeAttribute("required","");
     document.getElementById("pickuptime").removeAttribute("required","");
     document.getElementById("pickup").removeAttribute("required","");
     //Empty values they dont use
     document.getElementById('advancepayment_mail').value = "";
     document.getElementById('advancepayment_phone').value = "";
     document.getElementById('pickuptime').value = "";
     document.getElementById('pickup').value = "";
}

}