[英]Prevent Next button from going to next page
我在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>
您仍要轉到下一頁的原因是向導庫中的以下代碼行。
//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包括您的驗證器。 指定的回購允許您自由使用和編輯源代碼。 以下是一個例子
$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()。 我不知道該如何處理,但是您也可以嘗試一下。
防止JavaScript中的事件
您應該使用e.preventDefault();
將此代碼添加到else子句中
e.preventDefault();
return false;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.