Question

我使用像this这样的步骤形式，但是当我点击我的下一个按钮时，步骤传递给另一个而不写，

我使用的代码类似于链接，但我修改了一些东西，但函数是相同的，这是我的代码：

这是我的HTML

<table id="tabla-orden2">
    <tr>
        <td width="52%">
            <div class="form-group">
            <label class="control-label">Calle</label>
            <input type="text" required="required" class="form-control" placeholder="Escriba una calle" id="route" name="route" disabled="disabled" />
            </div>
        </td>
        <td>
            <div class="form-group">
                <label class="control-label">C.P.</label>
                <input maxlength="5" type="text" class="form-control" placeholder="06700" id="postal_code" name="postal_code" />
            </div>
        </td>
        <td>
            <div class="form-group">
                <label class="control-label">No. exterior</label>
                <input type="text" required="required" class="form-control" placeholder="000" id="street_number" name="street_number" disabled="disabled" />
            </div>
        </td>
        <td>
            <div class="form-group">
                <label class="control-label">No. interior</label>
                <input type="text" class="form-control" placeholder="000" id="internal_number" name="internal_number" disabled="disabled" />
            </div>
        </td>
    </tr>
</table>
<div class="posicion-boton-sig">
    <button class="btn btn-success nextBtn btn-lg pull-right btn-siguiente" type="button" id="siguiente">Siguiente </button>
</div>

这是我的剧本：

var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn'),
allPrevBtn = $('.prevBtn'),
allcloseBtn = $('.close');
allWells.hide();

navListItems.click(function (e) {
    e.preventDefault();
    var $target = $($(this).attr('href')),
    $item = $(this);

    if (!$item.hasClass('disabled')) {
        navListItems.removeClass('btn-primary').addClass('btn-black');
        $item.addClass('btn-success');
        allWells.hide();
        $target.show();
        $target.find('input:eq(0)').focus();

        if ($("hr.ln2").hasClass("cl3")) {
            $("#st-3").removeClass("btn-default3");
            $("hr.ln2").addClass("cll");
            $("a#st-2").html("<img src='/static/dashboard/img/icon/icon-ok.svg'>");
            $("p#nota").css("color", "#85c440");

        }

        if ($("hr").hasClass("ln1")) {
            $("#st-2").removeClass("btn-default3");
            $("hr.ln1").addClass("cll");
            $("hr.ln2").addClass("cl3");
            /*$("p#entrega").addClass("colorpesos");*/
            $("p#entrega").css("color", "#85c440");
            $("a.btn-circle1").html("<img src='/static/dashboard/img/icon/icon-ok.svg'>");
        }

    }
});

allcloseBtn.click(function () {
    $("#step-2").hide();
    $("#step-3").hide();
    $("#step-1").show();

    $('.pes-1').removeClass('colorpesos');
    $('.pes-2').removeClass('colorpesos');
    $('.pes-3').removeClass('colorpesos');

    $('.t-envio-9').removeClass('colorpesos');
    $('.t-envio-p').removeClass('colorpesos');

    $("#img-bici").hide();
    $("#img-moto").hide();
    $("#img-mc").hide();

    $('#entrega').css('color', '#6a706d');
    $('#nota').css('color', '#6a706d');

});

allNextBtn.click(function () {
    var curStep = $(this).closest(".setup-content"),
    curStepBtn = curStep.attr("id"),
    nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
    curInputs = curStep.find("input[type='text'],input[type='url']"),
    isValid = true;
    $(".form-group").removeClass("has-error");
    for (var i = 0; i < curInputs.length; i++) {
        if (!curInputs[i].validity.valid) {
            isValid = false;
            $(curInputs[i]).closest(".form-group").addClass("has-error");
        }
    }
    if (isValid)
        nextStepWizard.removeAttr('disabled').trigger('click');

});
allPrevBtn.click(function () {
    var curStep = $(this).closest(".setup-content"),
    curStepBtn = curStep.attr("id"),
    prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");
    $(".form-group").removeClass("has-error");

    var nn = document.getElementById("n9-minutos");
    var prg = document.getElementById("mismo-dia");

    if (nn.className == 'btn btn-default t-envio-9 colorpesos') {
        $('.t-envio-9').removeClass('colorpesos');
        nn.disabled = true;
    } else if (prg.className == 'btn btn-default t-envio-p colorpesos') {
        $('.t-envio-p').removeClass('colorpesos');
    }

    if (prg.disabled == false) {
        prg.disabled = true;
    }
    if (nn.disabled == false) {
        nn.disabled = true;
    }

    var bicycle = document.getElementById("peso-1");
    var bike = document.getElementById("peso-2");
    var mini = document.getElementById("peso-3");

    if (bicycle.className == 'btn btn-default pes-1 colorpesos') {
        $('.pes-1').removeClass('colorpesos');
    } else if (bike.className == 'btn btn-default pes-2 colorpesos') {
        $('.pes-2').removeClass('colorpesos');
    } else if (mini.className == 'btn btn-default pes-3 colorpesos') {
        $('.pes-3').removeClass('colorpesos');
    }


    prevStepWizard.removeAttr('disabled').trigger('click');
});

$('div.setup-panel div a.btn-primary').trigger('click');
//FIN FORM WIZARD

我想在单击下一个按钮时验证表单，但如果输入被禁用则无法验证

Answer 1

已停用=＆＃34;已停用＆＃34; 输入未发布，因此验证不考虑这些已停用的输入字段，因此请尝试使用 readonly

禁用并且要求不起作用

1 个答案: