javascript - 除非向导的每个选项卡都经过验证，否则阻止向导下一步按钮继续

Question

我的 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 = s.ChurchName + " " + s.ChuchDenomination + " " + s.ChurchType + " - " + s.ChurchCity + ", " + s.ChurchState
                                                    }),
                                                    "ID",
                                                    "FullName");
                viewModel.chlist3 = 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.chlist4 = 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.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 "
                                                              }),
                                                    "ID",
                                                    "FullName");
                viewModel.musicianTypes1 = new SelectList(db.musiciantypes, "id", "TypeName");
                viewModel.musicianTypes2 = new SelectList(db.musiciantypes, "id", "TypeName");

                return View(viewModel);
            }

向导的 Javascript：

<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>

标签： javascriptc#validationasp.net-mvc-5formwizard