Prevent Wizard Next Button From Progressing Unless Each Tab of the Wizard is Validated

254 Views Asked by At

I have a wizard in my MVC5 project that uses the built in validation from MVC. I would like to prevent the wizard from progressing unless all of the fields in the current tab pass validation. As far as I know, the MVC validation only validates when the user clicks submit. How do I prevent the user from going on to the next tab in the wizard when they click the next button unless all fields are valid? I tried to do it in Javascript but it didn't work. I believe it just does client side validation (the same as mvc) Is there a way to do this in C# MVC? If not, can someone explain why my javascript is not working to validate? The allNextBtn.click(function ()) is supposed to take care of this. When the user clicks the next button this function should fire and prevent the user from advancing but it doesn’t. It lets the user advance all the way though the form even if there are validation errors

Controller:

[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 for Wizard:





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

There are 0 best solutions below