Предотвратить переход кнопки Next на следующую страницу - PullRequest
Новая
       11

Предотвратить переход кнопки Next на следующую страницу

0 голосов
/ 01 мая 2018

У меня проблема с проверкой мастера в MVC. Я хочу, чтобы код проверял, является ли поле пустым или нет, прежде чем перейти на следующую страницу. Я использую этот мастер в моем проекте. Вот моя страница .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>

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

для предотвращения событий в JavaScript

Вы должны использовать e.preventDefault ();

добавить этот код в предложение else 

e.preventDefault();
return false;
0 голосов
/ 01 мая 2018

Причина, по которой вы все еще переходите на следующую страницу, заключается в следовании строке кодов в вашей библиотеке мастера. 

//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);

Полагаю, этого достаточно, чтобы вы начали.

EDIT Есть несколько способов сделать это изменение, расширив библиотеку, которая будет использовать валидатор для каждого шага Или вы можете изменить строку №. 74, чтобы включить ваш валидатор. Указанный репозиторий позволяет свободно использовать и редактировать исходный код. Ниже приведен пример 

$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 () в своем пользовательском обработчике событий, который вы написали в своем вопросе. Я не знаю, как угловатые ведут себя с этим, но вы также можете попробовать это.

...