Question

我正在 bootstrap 3 上进行表单向导验证。验证工作正常，下一个按钮也是如此，但前一个按钮不起作用。当我点击时，它不会转到上一个井。这是我正在使用的JavaScript：

    $(document).ready(function () {

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

 allWells.hide();

navListItems.click(function (e, isManual) {
e.preventDefault();

//
// test if the click event is ....
//
if(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) {

  //
  // 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});
}
});
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");
    prevStepWizard.removeAttr('disabled').trigger('click');
});

$('div.setup-panel div a.btn-primary').trigger('click', {'isManual': true});
});

小提琴：https://jsfiddle.net/shehzi/7fu1kq7v/

表单验证上一个按钮不起作用

0 个答案: