javascript - 防止 Next 按钮进入下一页
问题描述
我在 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 包括您的验证器。指定的 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()。我不知道角度对此有何表现,但您也可以尝试一下。
推荐阅读
- reactjs - 想要将元素推入状态变量数组
- c++ - 接收参数的 lambda 函数的类型
- g++ - 为什么一个函数最终会出现在符号表中,而另一个函数不会出现在同一个文件中?
- sql - 向表值函数添加条件
- azure - Azure:设置从根域到子域的重定向
- javascript - 在外部集合上使用选择器/过滤器 - 可能吗?
- requirejs - TYPO3 后端 - 未捕获的类型错误:要求不是函数
- php - 从 mangopay 仪表板更新用户时调用什么 webhook?
- android - 使用 rxJava 进行表单验证是否有意义
- deep-learning - yoloV3 (AlexeyAB):速率为 0.0000