首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >禁用和必需不起作用

禁用和必需不起作用
EN

Stack Overflow用户
提问于 2016-05-07 07:10:05
回答 1查看 133关注 0票数 0

我使用像this这样的step表单,但是当我单击我的next按钮时,步骤就会传递到另一个步骤,而不需要书写,

我使用的代码类似于链接,但我修改了一些东西,但功能是相同的,以下是我的代码:

这是我的HTML

代码语言:javascript
复制
<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>

下面是我的脚本:

代码语言:javascript
复制
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

我想在单击next按钮时验证表单,但如果输入被禁用,则不执行验证

EN

回答 1

Stack Overflow用户

发布于 2016-05-07 12:39:29

disabled="disabled"输入未过帐,因此验证不考虑那些禁用的输入字段,因此请尝试使用readonly

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37082650

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档