我在验证和表单向导方面遇到问题

Question

我试图添加一个带有验证的表单向导。 我面临的主要问题是步骤的禁用功能不起作用。 当我点击顶部的步骤编号时，它就会在没有任何验证的情况下关闭。

这是我的HTML

    <div class="x_content">
                    <div class="container">
                            <div class="stepwizard">
                                <div class="stepwizard-row setup-panel">
                                    <div class="stepwizard-step">
                                        <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
                                        <p>Step 1</p>
                                    </div>
                                    <div class="stepwizard-step">
                                        <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
                                        <p>Step 2</p>
                                    </div>
                                    <div class="stepwizard-step">
                                        <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
                                        <p>Step 3</p>
                                    </div>
                                </div>
                            </div>
                        <form role="form">
                            <div class="row setup-content" id="step-1">
                                <div class="col-xs-12">
                                    <div class="col-md-12">
                                        <h3> Step 1</h3>
                                        <div class="form-group">
                                            <label class="control-label">First Name</label>
                                            <input  maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name"  />
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label">Last Name</label>
                                            <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
                                        </div>
                                        <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
                                    </div>
                                </div>
                            </div>
                            <div class="row setup-content" id="step-2">
                                <div class="col-xs-12">
                                    <div class="col-md-12">
                                        <h3> Step 2</h3>
                                        <div class="form-group">
                                            <label class="control-label">Company Name</label>
                                            <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label">Company Address</label>
                                            <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address"  />
                                        </div>
                                        <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
                                    </div>
                                </div>
                            </div>
                            <div class="row setup-content" id="step-3">
                                <div class="col-xs-12">
                                    <div class="col-md-12">
                                        <h3> Step 3</h3>
                                        <button class="btn btn-success btn-lg pull-right" type="submit">Finish!</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
              </div>

我的CSS：

    .stepwizard-step p {
     margin-top: 10px;
     }

     .stepwizard-row {
     display: table-row;
     }

     .stepwizard {
     display: table;
     width: 100%;
     position: relative;
     }

     .stepwizard-step button[disabled] {
     opacity: 1 !important;
     filter: alpha(opacity=100) !important;
     }

     .stepwizard-row:before {
     top: 14px;
     bottom: 0;
     position: absolute;
     content: " ";
     width: 100%;
     height: 1px;
     background-color: #ccc;
     z-order: 0;

     }

    .stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
    }

    .btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
    }

JS：

                $(document).ready(function () {

                var navListItems = $('div.setup-panel div a'),
                allWells = $('.setup-content'),
                allNextBtn = $('.nextBtn');

        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-default');
                $item.addClass('btn-primary');
                allWells.hide();
                $target.show();
                $target.find('input:eq(0)').focus();
            }
        });

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

        $('div.setup-panel div a.btn-primary').trigger('click');
    });

请让我知道我做错了什么。 如何让它正常工作。 非常感谢。

Answer 1

您正在从allNextBtn.click(function(){触发click事件。

您可以考虑触发器（event [，extraParameters]）可以使用额外的参数。

利用这一点，您可以区分是从上述功能还是从用户触发。

此外，在删除下一个元素的禁用属性之前：

nextStepWizard.removeAttr('disabled').trigger('click', {'isManual': true});

您需要将disabled属性添加到所有（因此只启用一个）：

$('div.setup-panel div a[href^="#"]').attr('disabled', 'disabled')

我的片段：

 $(document).ready(function () { var navListItems = $('div.setup-panel div a'), allWells = $('.setup-content'), allNextBtn = $('.nextBtn'); allWells.hide(); navListItems.click(function (e, isManual) { e.preventDefault(); // // test if the click event is .... // if (($('div.setup-panel div a[disabled]').length == ($('div.setup-panel div a').length - 1)) && (isManual === undefined)) { return; } var $target = $($(this).attr('href')), $item = $(this); if (!$item.hasClass('disabled')) { navListItems.removeClass('btn-primary').addClass('btn-default'); $item.addClass('btn-primary'); allWells.hide(); $target.show(); $target.find('input:eq(0)').focus(); } }); 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) { if (nextStepWizard.index(('div.setup-panel div a')) == ($('div.setup-panel div a').length - 1)) { // // remove the disabled attribute to all // $('div.setup-panel div a[href^="#"]').removeAttr('disabled'); nextStepWizard.trigger('click', {'isManual': true}); } else { // // add the disabled attribute to all // $('div.setup-panel div a[href^="#"]').attr('disabled', 'disabled'); // // remove disabled only for the right element // nextStepWizard.removeAttr('disabled').trigger('click', {'isManual': true}); } } }); $('div.setup-panel div a.btn-primary').trigger('click', {'isManual': true}); }); 

 .stepwizard-step p { margin-top: 10px; } .stepwizard-row { display: table-row; } .stepwizard { display: table; width: 100%; position: relative; } .stepwizard-step button[disabled] { opacity: 1 !important; filter: alpha(opacity=100) !important; } .stepwizard-row:before { top: 14px; bottom: 0; position: absolute; content: " "; width: 100%; height: 1px; background-color: #ccc; z-order: 0; } .stepwizard-step { display: table-cell; text-align: center; position: relative; } .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="x_content"> <div class="container"> <div class="stepwizard"> <div class="stepwizard-row setup-panel"> <div class="stepwizard-step"> <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a> <p>Step 1</p> </div> <div class="stepwizard-step"> <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a> <p>Step 2</p> </div> <div class="stepwizard-step"> <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a> <p>Step 3</p> </div> </div> </div> <form role="form"> <div class="row setup-content" id="step-1"> <div class="col-xs-12"> <div class="col-md-12"> <h3> Step 1</h3> <div class="form-group"> <label class="control-label">First Name</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" /> </div> <div class="form-group"> <label class="control-label">Last Name</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" /> </div> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> </div> </div> </div> <div class="row setup-content" id="step-2"> <div class="col-xs-12"> <div class="col-md-12"> <h3> Step 2</h3> <div class="form-group"> <label class="control-label">Company Name</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" /> </div> <div class="form-group"> <label class="control-label">Company Address</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" /> </div> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> </div> </div> </div> <div class="row setup-content" id="step-3"> <div class="col-xs-12"> <div class="col-md-12"> <h3> Step 3</h3> <button class="btn btn-success btn-lg pull-right" type="submit">Finish!</button> </div> </div> </div> </form> </div> </div>