Javascript 阻止“下一页”按钮转到下一页
我在MVC中面临向导验证问题。我希望代码在跳转到下一页之前检查字段是否为空。我正在我的项目中使用。这是我的.cshtml页面:Javascript 阻止“下一页”按钮转到下一页,javascript,validation,wizard,Javascript,Validation,Wizard,我在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-
<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>
{{currentStepIndex==steps.length-1?'Finish':'Next'}
上
$(文档)。在“单击”上,函数(e){
if($('vnbtnext').html().indexOf(“Next”)!=-1&('vnbtnext').attr('data-attr')==“1”){
if($('input[name=FirstName]')。val()=“”){
$(“输入[name=FirstName]”)css(“背景色”、“浅黄色”);
$('input[name=FirstName]')。focus();
警报(“请输入英文名”);
}
}
否则{
返回;
}
});
仍要转到下一页的原因是向导库中的以下代码行
//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
实现,使其在通过所有验证之前不会切换。基本上,我要说的是,当且仅当所有验证都在当前步骤中通过时,您需要有条件地执行以下行
//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()。我不知道如何处理这个问题,但您也可以尝试一下。防止JavaScript中的事件 您应该使用e.preventDefault()强> 将此代码添加到else子句中
e.preventDefault();
return false;
有道理。但是如何将验证规则添加到wizard.js?验证规则是这样的:如果(“#firstName”).val()==”{//告诉用户他们必须输入名字}否则{//转到下一页}感谢您的快速回复。我以前尝试过e.preventDefault(),但它不起作用。StopperPogation给了我一个错误,说它不是一个函数。至于添加验证程序,我如何向执行验证的wizard.js发送一个值?在向导中,您有基于该步骤编号的步骤信息访问步骤容器,在步骤容器中,您将找到所有控件。然后使用你想应用的任何验证规则。我很困惑。如何将.cshtml页面中的值发送到wizard.js?很抱歉回复太晚。你的回答奏效了!我刚刚将wizard.js代码移动到.cshtml页面内的脚本标记中。然后,在切换步骤之前,我编辑了$scope.showNextStep函数以包含验证。非常感谢你的帮助!试试e.stoppropagation()
e.preventDefault();
return false;