除非验证向导的每个选项卡，否则禁止向导的下一步按钮前进

问题描述

我的MVC5项目中有一个向导，该向导使用来自MVC的内置验证。除非当前选项卡中的所有字段均通过验证，否则我想阻止向导继续进行。据我所知，MVC验证仅在用户单击“提交”时才进行验证。除非所有字段均有效，否则如何防止用户单击下一步按钮时继续进入向导中的下一个选项卡？我试图用Javascript来做，但是没有用。我相信这只是客户端验证（与mvc一样）。在C＃MVC中有没有办法做到这一点？如果没有，有人可以解释为什么我的JavaScript无法正常工作吗？ allNextBtn.click（function（））应该负责这一点。当用户单击下一步按钮时，此功能应触发并阻止用户前进，但不会。即使存在验证错误，它也可以使用户从表单中一直前进

控制器：

[HttpPost]
        public ActionResult Create(LoginSecurityQuestionsviewmodel chargeDto)
        {
            
            if (ModelState.IsValid == false)
            {
                LoginSecurityQuestionsviewmodel viewmodel = new LoginSecurityQuestionsviewmodel();
                viewmodel.chlist1 = new SelectList((from s in db.churches
                                                    select new
                                                    {
                                                        ID = s.id,FullName = s.ChurchName + " " + s.ChuchDenomination + " " + s.ChurchType + " - " + s.ChurchCity + "," + s.ChurchState
                                                    }),"ID","FullName");
                viewmodel.chlist2 = new SelectList((from s in db.churches
                                                    select new
                                                    {
                                                        ID = s.id,"FullName");
                viewmodel.chlist3 = new SelectList((from s in db.churches
                                                    select new
                                                    {
                                                        ID = s.id,"FullName");
                viewmodel.chlist4 = new SelectList((from s in db.churches
                                                    select new
                                                    {
                                                        ID = s.id,"FullName");
                viewmodel.seclist = new SelectList(db.secretquestions,"id","Question");
                viewmodel.subscriptionTypes = new SelectList((from s in db.subscriptiontypes
                                                              select new
                                                              {
                                                                  ID = s.StripePriceID,FullName = s.SubscriptionType1 + " - $" + s.Price + "/Month "
                                                              }),"FullName");
                viewmodel.musicianTypes1 = new SelectList(db.musiciantypes,"TypeName");
                viewmodel.musicianTypes2 = new SelectList(db.musiciantypes,"TypeName");

                return View(viewmodel);
            }

向导的Java语言：

<script type="text/javascript">



    $(document).ready(function () {

        var navListItems = $('div.setup-panel div a'),allWells = $('.setup-content'),allNextBtn = $('.nextBtn');

        allWells.hide();

        navListItems.click(function (e) {
            e.preventDefault();
            var $target = $($(this).attr('href')),$item = $(this);

            if (!$item.hasClass('disabled')) {
                navListItems.removeClass('btn-success').addClass('btn-default');
                $item.addClass('btn-success');
                allWells.hide();
                $target.show();
                $target.find('input:eq(0)').focus();
            }
        });

        allNextBtn.click(function () {
            var curStep = $(this).closest(".setup-content"),curStepBtn = curStep.attr("id"),nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),curInputs = curStep.find("input,select"),isValid = true;

            $(".form-group").removeClass("has-error");
            for (var i = 0; i < curInputs.length; i++) {
                if (!curInputs[i].validity.valid) {
                    isValid = false;
                    $(curInputs[i]).closest(".form-group").addClass("has-error");
                }
            }

            if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
        });

        $('div.setup-panel div a.btn-success').trigger('click');
    });


</script>

<script>
    $('.select2').select2();
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）