验证后,Onchange事件不起作用

时间:2019-11-23 22:29:30

标签: javascript jquery parsley.js

我的问题是,当我按下“选择”上的“下一步”按钮时,该选择显示为无效,但随后不执行onchange功能。因此不可能继续下去。您能帮我为什么吗?

更新: 如果我首先将select更改为带有值的选项,则一切正常。您可以here看到它。

简单前进,当选择出现时,不输入任何内容,然后单击“继续”。欧芹会说它无效,您必须选择一些东西。但是,当我选择某些内容时,onchange事件不会向我显示隐藏的字段。

没有香菜,一切正常。因此,问题在于在进行香菜验证后,偶然事件不再触发。有提示吗?

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

更改功能

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 = "";
}

}

0 个答案:

没有答案