防止 Next 按钮转到下一页

Question

我在 MVC 中遇到向导验证问题。我希望代码在跳转到下一页之前检查字段是否为空。我在我的项目中使用 this wizard。这是我的 .cshtml 页面：

<div class="col-sm-12 text-right bottom-prev-next">
    <button id="vnBtnNext" type="button" class="btn btn-primary btn-sm btn-next" data-attr="{{currentStepIndex==steps.length-1?currentStepIndex:currentStepIndex}}">{{currentStepIndex==steps.length-1?'Finish':'Next'}}<i class="fa fa-arrow-right"></i></button>
    <button id="vnBtnPrev" type="button" class="btn btn-primary btn-sm btn-prev pull-left"><i class="fa fa-arrow-left"></i>Prev</button>
</div>

<script type="text/javascript">

$(document).on("click", "#vnBtnNext", function (e) {

    if ($('#vnBtnNext').html().indexOf("Next") != -1 && $('#vnBtnNext').attr('data-attr') == "1") {
        if ($('input[name=FirstName]').val() == "") {

            $("input[name=FirstName]").css("background-color", "lightyellow");
            $('input[name=FirstName]').focus();
            alert('Please enter the First Name in English');
        }
    }
    else {
        return;
    }
});
 </script>

Answer 1

您仍然转到下一页的原因是您的向导库中有以下代码行。

//line no. 29-33
var btnNexts = document.querySelectorAll( '.btn-next' );
for (var j = 0; j < btnNexts.length; ++j) {
    angular.element(btnNexts[j]).attr('ng-click','showNextStep()');
    angular.element(btnNexts[j]).attr('ng-disabled', '!hasNext() && !isFinish()');
}

和showNextStep如下

$scope.showNextStep = function(){$scope.toggleSteps($scope.currentStepIndex + 1, true);}

您需要更改 showNextStep 实现，使其在所有验证通过之前不会切换。基本上我要说的是，当且仅当所有验证都在当前步骤中通过时，您才需要有条件地执行以下行。

//line no. 74
$scope.toggleSteps($scope.currentStepIndex + 1, true);

我想这足以让您入门。

编辑您可以通过多种方式进行此更改，方法是扩展此库，每个步骤都需要验证器。或者您可以修改行号。 74 包括您的验证器。指定的 repo 允许您自由使用和编辑源代码。下面是一个例子

$scope.showNextStep = function(){

          var validationPassed = true; // make validator for each step and call that validor based on step which will return true/false or if you want sophistication then let them return object with validation message.

          // This is proof of concept and needs to be in function.
          if ($('input[name=FirstName]').val() == "") {

               $("input[name=FirstName]").css("background-color", "lightyellow");
               $('input[name=FirstName]').focus();
               alert('Please enter the First Name in English');
               validationPassed  = false;
          }



  if(validationPassed)
    $scope.toggleSteps($scope.currentStepIndex + 1, true);
  else
    //Do not toggle step and show validation message.

}

我猜你明白了。

或者您可以在问题中编写的自定义事件处理程序中尝试 e.preventDefault() 和 e.stopPropogation()。我不知道 angular 对此有何反应，但你也可以试试这个。

Answer 2

防止 JavaScript

中的事件

你应该使用e.preventDefault();

在 else 子句中添加此代码

e.preventDefault();
return false;

防止 Next 按钮转到下一页

Prevent Next button from going to next page

javascript

validation

wizard