Questions on UI for ASP.NET MVC Forum

1 answer

112 views

Validator.Validate() on a form in a Wizard shows true always

Summary

Struggling with this issue for weeks now. Please need help!

Goal - Stop the wizard from going to next step when there is a custom validation

Issue : The custom validation "Min age has to be 16 years " shows up on Validation blur , but does not stop the propagation to the next step.

validator.validate() comes up as true in both form and div approach

First approach

1. Addded a kendo wizard with a .Tag("div") tag so that 4 steps in there show up as individual forms

@(
Html.Kendo().Wizard()
.Name("LicenseWizard")
.Tag("form")
.Steps(s =>
{

s.Add<WizardViewModel>()
.Title("County")
.ClassName("CountyClass")
.Form(f => f
.Name("FormCounty")
.FormData(Model)

... There are 4 steps in total

2. Used this in the Onselect step method

function onSelect(e) {

// Get the current step's index
var stepIndex = e.step.options.index;

// Get the current step's container element
var container = e.sender.currentStep.element;

if (stepIndex < currentStep) {
e.preventDefault();
}
else {

// Validate Party One
if (stepIndex == 2) {

var form = $("#LicenseWizard-1").find('form');

var validator = form.data("kendoValidator");

alert('validator.validate()' + validator.validate());

// Validate given input elements
if (!validator.validate()) {
// Prevent the wizard's navigation
e.preventDefault();

}

Shows true and goes to next step

Second approach

1. Use the .Tag("form")

@(
Html.Kendo().Wizard()
.Name("LicenseWizard")
.Tag("div")
.Steps(s =>
{

s.Add<WizardViewModel>()
.Title("County")
.ClassName("CountyClass")
.Form(f => f
.Name("FormCounty")
.FormData(Model)
.Items(items =>

2. In the

// Validate
if (stepIndex == 2) {

var form = $("#LicenseWizard-1").find('form');

var validator = form.data("kendoValidator");
// Instantiate a validator for the container element

// Get the validator's reference
var validator = $(container).kendoValidator().data("kendoValidator");

alert('validator.validate()' + validator.validate());

// Validate given input elements
if (!validator.validate()) {
// Prevent the wizard's navigation
e.preventDefault();

Even this returns true

Custom rules at the begining , which work on validate blur

$(function () {
$("#LicenseWizard").kendoValidator({
rules: {
requiredIfValue: function (input) {
//debugger;

if (input.is("[data-val-requiredifvalue]") && !input.val()) {

....

}

minagedate: function (input) {

if (input.is("[id ='PartyOne.Pty1DateOfBirth']") || input.is("[id ='PartyTwo.Pty2DateOfBirth']")) {
var value = $(input).val();
...............//

//console.log('todayMinus16' + todayMinus16);

var result = (todayMinus16 >= birthdate);

return result;
}

Question : minagedate validate on blur works . When I click on next , on Step 2 , the container in the approach when i use a div tag on wizard is the form that I get manually and in the second approach it is container that I get using the step method.

I defined rules at the main wizard level ----

$(function () {
$("#LicenseWizard").kendoValidator({

how can make the validator.validate() false in my steps when there is something on the custom rules (that also show up on validate on blur) ?

Wizard

answered on 26 Jul 2024

0 answers

190 views

ASP.NET MVC Wizard AJAX Partial Views and how to save the model.

After a long day, I finally got all the validation working as I intend it. The question I now have is how do I pass the model back and forth between each step? My basic setup is I have Business.cshtml that has my Wizard on it. For each step of the wizard I then retrieve the correct PartialView and render to the step. What I am unsure of how to do is how do you pass the model back and forth. I made the assumption using '@Url.Action("_BusinessFinancial", "Onboard",Model)' in the javascript would work but I am just not 100% how to save the model between each step and reuse it.

Here is my Business.cshtml

@using Kendo.Mvc.UI
@model Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel

@{
    ViewBag.Title = "Business Onboarding";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    .wide {
        width: 95%;
    }

    .field-validation-error {
        color: red;
    }
</style>


<!-- Wizard -->
@(Html.Kendo().Wizard()
        .Name("wizard")
        .Events(ev => ev.Select("onSelect"))
        .Events(ev => ev.Done("onDone"))
        .LoadOnDemand(true)
        .HtmlAttributes(new { @novalidate = "" })
        .ReloadOnSelect(false)
        .Steps(s =>
        {
            s.Add<Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel>()
            .Title("Business Profile")
            .ContentUrl(Url.Action("_BusinessProfile", "Onboard", Model))
            .Buttons(b =>
            {
                b.Next().Text("Next");
            });

            s.Add<Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel>()
            .Title("Business Financial")
            .ContentUrl(Url.Action("_BusinessFinancial", "Onboard", Model))
            .Buttons(b =>
            {
                b.Previous().Text("Back");
                b.Next().Text("Next");
            });
            s.Add<Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel>()
            .Title("Business Address")
            .ContentUrl(Url.Action("_BusinessAddress", "Onboard", Model))
            .Buttons(b =>
            {
                b.Previous().Text("Back");
                b.Done().Text("Submit");
            });
        })
    )

<script type="text/javascript">
    var dataPartial1;
    var dataPartial2;
    var currentStep;

    function onSelect(e) {
        var form, contentUrl;
        if (e.step.options.index < currentStep) {
        }
        else {
            if (e.step.options.index == 1) {
                form = $('#frmPartialBusinessProfile');
                dataPartial1 = form.serialize();
                contentUrl = '@Url.Action("_BusinessFinancial", "Onboard",Model)';
            }
            else if (e.step.options.index == 2) {
                form = $('#frmPartial2');
                dataLesions = form.serialize();
                contentUrl = '@Url.Action("_BusinessAddress", "Onboard",Model)';
            }
            if (!form.valid()) {
                e.preventDefault();
            }
            else {
                e.step.options.contentUrl = contentUrl;
            }
        }
        currentStep = e.step.options.index;
    }

    function onNextStep(e) {
        if (e.step.options.index == 2) {
            openDoc();
        }
    }

    function onDone(e) {

        var form = $('#frmMain');

        if (form.valid()) {
            form.submit();
        }

    }

    var onAddMainSuccess = function (result) {

        if (result.error) {
            alert(result.error);
        }
    };

</script>

Here is my Onboard controller

using Kendo.Mvc.UI;
using Reverberate.Services;
using Kendo.Mvc.Extensions;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Reverberate.Model;

namespace CallCenterWebsiteHelper.Controllers
{
    public class OnboardController : Controller
    {
        // GET: Campaign
        private List<SelectListItem> StatesSelectList()
        {
            var slStates = new List<SelectListItem>();
            var states = new Reverberate.BLL.General.StaticDataSet.Geographic().States();
            for (int i = 0; i < states.Count; i++)
                slStates.Add(new SelectListItem() { Text = states[i], Value = states[i] });
            return slStates;
        }
        private List<SelectListItem> BusinessTypesSelectList()
        {
            var sl = new List<SelectListItem>();
            var list = new Reverberate.BLL.General.StaticDataSet.BusinessInformation().BusinessTypeList();
            for (int i = 0; i < list.Count; i++)
                sl.Add(new SelectListItem() { Text = list[i], Value = list[i] });
            return sl;
        }

        public ActionResult Business()
        {
            ViewBag.States = StatesSelectList();
            ViewBag.BusinessTypeList = BusinessTypesSelectList();
            var model = new Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel();
            model.BusinessProfileModel = new Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessProfileModel();
            model.BusinessFinancialModel = new Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessFinancialModel();
            return View("Business",model);
        }
        public ActionResult _BusinessProfile(Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel viewModel)
        {
            ViewBag.States = StatesSelectList();
            ViewBag.BusinessTypeList = BusinessTypesSelectList();
            return PartialView("_BusinessProfile",viewModel);
        }
        public ActionResult _BusinessFinancial(Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel viewModel)
        {
            ViewBag.States = StatesSelectList();
            ViewBag.BusinessTypeList = BusinessTypesSelectList();
            return PartialView("_BusinessFinancial", viewModel);
        }
        public ActionResult _BusinessAddress(Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel viewModel)
        {
            ViewBag.States = StatesSelectList();
            ViewBag.BusinessTypeList = BusinessTypesSelectList();
            return PartialView("_BusinessAddress", viewModel);
        }
        /*
        public ActionResult BusinessProfile()
        {

            return PartialView("_BusinessProfile");
        }*/
    }
}

here is my two partial views

_busiessprofile

@using Kendo.Mvc.UI
@model Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel
@using (Html.BeginForm(null, null, FormMethod.Post, new { @id = "frmPartialBusinessProfile", @name = "frmPartialBusinessProfile" }))
{
    <div style="width: 45%; float: left; border: 1px solid black" id="BusinessInfoEntry">
        <h3>Business Profile</h3>
        <fieldset>
            <legend></legend>
            <ol>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.BusinessName)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.BusinessName, new { maxlength = 200, @class = "wide" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.BusinessName)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.FederalTaxId)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.FederalTaxId, new { maxlength = 20 })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.FederalTaxId)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.BusinessStartDate)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.BusinessStartDate, new { @type = "date", @class = "form-control datepicker", @Value = Model == null || Model.BusinessProfileModel.BusinessStartDate == null ? null : Model.BusinessProfileModel.BusinessStartDate.ToString("yyyy-MM-dd") })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.BusinessStartDate)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.Industry)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.Industry, new { maxlength = 200, @class = "wide" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.Industry)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.Sector)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.Sector, new { maxlength = 200, @class = "wide" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.Sector)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.StateOfFormation)
                    <br />
                    @Html.DropDownListFor(m => m.BusinessProfileModel.StateOfFormation, new SelectList(ViewBag.States, "Value", "Text"), "Select State", htmlAttributes: new { @class = "form-control", id = "StateOfFormationList" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.StateOfFormation)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.EmployeeCount)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.EmployeeCount, new { @type = "number", @class = "wide" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.EmployeeCount)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.BusinessStructure)
                    <br />
                    @Html.DropDownListFor(m => m.BusinessProfileModel.BusinessStructure, new SelectList(ViewBag.BusinessTypeList, "Value", "Text"), "Select Business Structure", htmlAttributes: new { @class = "form-control", id = "BusinessStructureList" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.BusinessStructure)
                </li>
            </ol>
        </fieldset>
    </div>
}

_BusinessFinancial.cshtml

@using Kendo.Mvc.UI
@model Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel

<h2>Business Financial</h2>
<div style="width: 90%; border: 1px solid silver" id="BusinessInfoEntry">
    <fieldset>
        <legend></legend>
        <ol>
            <li>
                @Html.LabelFor(m => m.BusinessFinancialModel.CreditCardProcessor)
                @Html.TextBoxFor(m => m.BusinessFinancialModel.CreditCardProcessor, new { maxlength = 200, @class = "wide" })
                @Html.ValidationMessageFor(m => m.BusinessFinancialModel.CreditCardProcessor)
            </li>
            <li>
                @Html.LabelFor(m => m.BusinessFinancialModel.CreditCardMonthlyVolume)
                @Html.TextBoxFor(m => m.BusinessFinancialModel.CreditCardMonthlyVolume, new { maxlength = 20 })
                @Html.ValidationMessageFor(m => m.BusinessFinancialModel.CreditCardMonthlyVolume)
            </li>
            <li>
                @Html.LabelFor(m => m.BusinessFinancialModel.GrossMonthlySales)
                @Html.TextBoxFor(m => m.BusinessFinancialModel.GrossMonthlySales, new { @type = "date", @class = "form-control datepicker", @Value = Model == null || Model.BusinessProfileModel.BusinessStartDate == null ? null : Model.BusinessProfileModel.BusinessStartDate.ToString("yyyy-MM-dd") })
                @Html.ValidationMessageFor(m => m.BusinessFinancialModel.GrossMonthlySales)
            </li>
            <li>
                @Html.LabelFor(m => m.BusinessFinancialModel.AnnualRevenue)
                @Html.TextBoxFor(m => m.BusinessFinancialModel.AnnualRevenue, new { maxlength = 200, @class = "wide" })
                @Html.ValidationMessageFor(m => m.BusinessFinancialModel.AnnualRevenue)
            </li>
        </ol>
    </fieldset>
    <br />
</div>

here are the three models

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Reverberate.BLL.Model.Form.Application.BusinessOnboarding
{
    public class BusinessOnboardingModel
    {
        public BusinessProfileModel BusinessProfileModel { get; set; }

        public BusinessFinancialModel BusinessFinancialModel { get; set; }

    }
}

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Reverberate.BLL.Model.Form.Application.BusinessOnboarding
{
    public class BusinessProfileModel
    {
        public BusinessProfileModel() { }

        [Required(ErrorMessage = "The business name is required.")]
        [DisplayName("*Business Name")]
        [StringLength(250)]
        public string BusinessName { get; set; }

        [DisplayName("*Federal Tax Id / SSN")]
        [StringLength(15, ErrorMessage = "Please enter a valid federal tax id or SSN")]
        [Required(ErrorMessage = "Please enter the federal tax id or SSN")]
        public string FederalTaxId { get; set; }

       

        [DisplayName("*Business Start Date")]
        [Required(ErrorMessage = "Please enter the business start date")]
        public DateTime BusinessStartDate { get; set; }

        [Required(ErrorMessage = "The industry is required.")]
        [DisplayName("*Industry")]
        [StringLength(500)]
        public string Industry { get; set; }

        [Required(ErrorMessage = "The sector is required.")]
        [DisplayName("*Sector")]
        [StringLength(500)]
        public string Sector { get; set; }


        [DisplayName("*State of Formation")]
        [Validation.InputValidation.ValidState(ErrorMessage = "This does not appear to be a valid US State.")]
        [Required(ErrorMessage = "The State of Formation is required.")]

        public string StateOfFormation { get; set; }
        

        [DisplayName("*No of Employees")]
        [Validation.InputValidation.ValidState(ErrorMessage = "Number of Employees.")]
        [Required(ErrorMessage = "Please Supply the number of employees.")]
        public int EmployeeCount { get; set; }


        [Validation.InputValidation.ValidBusinessType(ErrorMessage = "Please enter a valid business structure")]
        [Required(ErrorMessage = "The business structure required.")]
        [DisplayName("*Business Structure")]
        public string BusinessStructure { get; set; }
    }
}

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Reverberate.BLL.Model.Form.Application.BusinessOnboarding
{
    public class BusinessProfileModel
    {
        public BusinessProfileModel() { }

        [Required(ErrorMessage = "The business name is required.")]
        [DisplayName("*Business Name")]
        [StringLength(250)]
        public string BusinessName { get; set; }

        [DisplayName("*Federal Tax Id / SSN")]
        [StringLength(15, ErrorMessage = "Please enter a valid federal tax id or SSN")]
        [Required(ErrorMessage = "Please enter the federal tax id or SSN")]
        public string FederalTaxId { get; set; }

       

        [DisplayName("*Business Start Date")]
        [Required(ErrorMessage = "Please enter the business start date")]
        public DateTime BusinessStartDate { get; set; }

        [Required(ErrorMessage = "The industry is required.")]
        [DisplayName("*Industry")]
        [StringLength(500)]
        public string Industry { get; set; }

        [Required(ErrorMessage = "The sector is required.")]
        [DisplayName("*Sector")]
        [StringLength(500)]
        public string Sector { get; set; }


        [DisplayName("*State of Formation")]
        [Validation.InputValidation.ValidState(ErrorMessage = "This does not appear to be a valid US State.")]
        [Required(ErrorMessage = "The State of Formation is required.")]

        public string StateOfFormation { get; set; }
        

        [DisplayName("*No of Employees")]
        [Validation.InputValidation.ValidState(ErrorMessage = "Number of Employees.")]
        [Required(ErrorMessage = "Please Supply the number of employees.")]
        public int EmployeeCount { get; set; }


        [Validation.InputValidation.ValidBusinessType(ErrorMessage = "Please enter a valid business structure")]
        [Required(ErrorMessage = "The business structure required.")]
        [DisplayName("*Business Structure")]
        public string BusinessStructure { get; set; }
    }
}

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Reverberate.BLL.Model.Form.Application.BusinessOnboarding
{
    public class BusinessFinancialModel
    {
        public BusinessFinancialModel() { }

        [DisplayName("Credit Card Processor")]
        [StringLength(250)]
        public string CreditCardProcessor { get; set; }

        [DisplayName("Credit Card Monthly Volume")]
        public decimal CreditCardMonthlyVolume { get; set; }

        [DisplayName("Gross Monthly Sales")]
        public decimal GrossMonthlySales { get; set; }

        [DisplayName("AnnualRevenue")]
        public decimal AnnualRevenue { get; set; }


    }
}

As recommend in my other question here: I have created a sample project. In this project there is an Index.cshtml which has my original structure. With regards to the index.cshtml there are two things, one - I am not sure why validation doesn't occur on the original page load, I have to reload the page to force page validation and also on the done command there isn't any validation occuring.

I created ind.cshtml when I trying the recomemnded solution for the question here: https://www.telerik.com/forums/using-wizard---how-do-you-validate-a-form-when-step-includes-partial-view#5789804 and I am getting `

Severity Code Description Project File Line Suppression State
Error CS1660 Cannot convert lambda expression to type 'string' because it is not a delegate type 6_Views_Home_Index2.cshtml M:\Code\Development\WizardPartialExample\WizardPartialExample\WizardPartialExample\Views\Home\Index2.cshtml 19 Active`

Form

Wizard

updated question on 22 Feb 2024

1 answer

743 views

Using Wizard - how do you validate a form when step includes partial view.

I'm pretty much at the point I give up. All I want to do is use the Wizard to load partial views for each step, and all I want to do is prevent the next step if the form can't be validated. I've tried nearly everything for 3 days and I can't seem to find an answer. I've tried jquery..validate and it just goes no where.

I just have a real simple setup, Business.cshtml which contains the wizard

@using Kendo.Mvc.UI
@model Reverberate.BLL.Model.Form.Application.BusinessOnboardingModel

@{
    ViewBag.Title = "Business Onboarding";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    .wide {
        width: 95%;
    }

    .field-validation-error {
        color: red;
    }
</style>



    <!-- Wizard -->
    @(Html.Kendo().Wizard()
        .Name("wizard")
        .Events(ev => ev.Select("onSelect"))
        .Events(ev => ev.Done("onDone"))
        .LoadOnDemand(true)
        .ReloadOnSelect(false)
        .Steps(s =>
        {
            s.Add<Reverberate.BLL.Model.Form.Application.BusinessOnboardingModel>()
            .Title("Business Profile")
            .ContentUrl(Url.Action("_BusinessProfile", "Onboard"))
            .Buttons(b =>
            {
                b.Next().Text("Next");
            });

            s.Add<Reverberate.BLL.Model.Form.Application.BusinessOnboardingModel>()
            .Title("Business Financial")
            .ContentUrl(Url.Action("_BusinessFinancial", "Onboard", Model))
            .Buttons(b =>
            {
                b.Previous().Text("Back");
                b.Next().Text("Next");
            });
            s.Add<Reverberate.BLL.Model.Form.Application.BusinessOnboardingModel>()
            .Title("Business Address")
            .ContentUrl(Url.Action("_BusinessAddress", "Onboard", Model))
            .Buttons(b =>
            {
                b.Previous().Text("Back");
                b.Done().Text("Submit");
            });
        })
    )

<script type="text/javascript">
    var dataPartial1;
    var dataPartial2;
    var currentStep;

    function onSelect(e) {

       
        var form, contentUrl;

        if (e.step.options.index < currentStep) {
            e.preventDefault();
        }
        else {

            if (e.step.options.index == 1) {
                form = $('#frmPartialBusinessProfilefrmPartialBusinessProfile');
                dataPartial1 = form.serialize();
                contentUrl = '@Url.Action("_BusinessFinancial", "Onboard",Model)';
            }
            else if (e.step.options.index == 2) {
                form = $('#frmPartial2');
                dataLesions = form.serialize();
                contentUrl = '@Url.Action("_BusinessAddress", "Onboard",Model)';
            }
            if (!form.valid()) {
                alert('not valid');
                e.preventDefault();
            }
            else {
                alert('valid');
                e.step.options.contentUrl = contentUrl;
            }
            alert('done');
        }


        currentStep = e.step.options.index;
    }

    function onNextStep(e) {
        if (e.step.options.index == 2) {
            openDoc();
        }
    }

    function onDone(e) {

        var form = $('#frmMain');

        if (form.valid()) {
            form.submit();
        }

    }

    var onAddMainSuccess = function (result) {

        if (result.error) {
            alert(result.error);
        }
    };


</script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>

and a partial view called _BusinessProfile

@using Kendo.Mvc.UI
@model Reverberate.BLL.Model.Form.Application.BusinessOnboardingModel

<form id="frmPartialBusinessProfile" name="frmPartialBusinessProfile">
    <div style="width: 45%; float: left; border: 1px solid black" id="BusinessInfoEntry">
        <h3>Business Profile</h3>
        <fieldset>
            <legend></legend>
            <ol>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.BusinessName)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.BusinessName, new { maxlength = 200, @class = "wide" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.BusinessName)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.FederalTaxId)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.FederalTaxId, new { maxlength = 20 })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.FederalTaxId)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.BusinessStartDate)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.BusinessStartDate, new { @type = "date", @class = "form-control datepicker", @Value = Model == null || Model.BusinessProfileModel.BusinessStartDate == null ? null : Model.BusinessProfileModel.BusinessStartDate.ToString("yyyy-MM-dd") })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.BusinessStartDate)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.Industry)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.Industry, new { maxlength = 200, @class = "wide" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.Industry)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.Sector)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.Sector, new { maxlength = 200, @class = "wide" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.Sector)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.StateOfFormation)
                    <br />
                    @Html.DropDownListFor(m => m.BusinessProfileModel.StateOfFormation, new SelectList(ViewBag.States, "Value", "Text"), "Select State", htmlAttributes: new { @class = "form-control", id = "StateOfFormationList" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.StateOfFormation)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.EmployeeCount)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.EmployeeCount, new { @type = "number", @class = "wide" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.EmployeeCount)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.BusinessStructure)
                    <br />
                    @Html.DropDownListFor(m => m.BusinessProfileModel.BusinessStructure, new SelectList(ViewBag.BusinessTypeList, "Value", "Text"), "Select Business Type", htmlAttributes: new { @class = "form-control", id = "StateOfFormationList" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.BusinessStructure)
                </li>
            </ol>
        </fieldset>
    </div>
</form>

{

    public class BusinessOnboardingModel
    {
        public BusinessProfileModel BusinessProfileModel { get; set; }

        public BusinessFinancialModel BusinessFinancialModel { get; set; }
    }
}

and here is the BusinessProfileModel

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Reverberate.BLL.Model.Form.Application.BusinessOnboarding
{
    public class BusinessProfileModel
    {
        public BusinessProfileModel() { }

        [Required(ErrorMessage = "The business name is required.")]
        [DisplayName("*Business Name")]
        [StringLength(250)]
        public string BusinessName { get; set; }

        [DisplayName("*Federal Tax Id / SSN")]
        [StringLength(15, ErrorMessage = "Please enter a valid federal tax id or SSN")]
        [Required(ErrorMessage = "Please enter the federal tax id or SSN")]
        public string FederalTaxId { get; set; }

       

        [DisplayName("*Business Start Date")]
        [Required(ErrorMessage = "Please enter the business start date")]
        public DateTime BusinessStartDate { get; set; }

        [Required(ErrorMessage = "The industry is required.")]
        [DisplayName("*Industry")]
        [StringLength(500)]
        public string Industry { get; set; }

        [Required(ErrorMessage = "The sector is required.")]
        [DisplayName("*Sector")]
        [StringLength(500)]
        public string Sector { get; set; }


        [DisplayName("*State of Formation")]
        [Validation.InputValidation.ValidState(ErrorMessage = "This does not appear to be a valid US State.")]
        [Required(ErrorMessage = "The State of Formation is required.")]

        public string StateOfFormation { get; set; }
        

        [DisplayName("*No of Employees")]
        [Validation.InputValidation.ValidState(ErrorMessage = "Number of Employees.")]
        [Required(ErrorMessage = "Please Supply the number of employees.")]
        public int EmployeeCount { get; set; }


        [Validation.InputValidation.ValidBusinessType(ErrorMessage = "Please enter a valid business structure")]
        [Required(ErrorMessage = "The business structure required.")]
        [DisplayName("*Business Structure")]
        public string BusinessStructure { get; set; }
    }
}

Wizard

answered on 22 Feb 2024

1 answer

1.2K+ views

Validating Data in a Wizard Step and Preventing Next Step

I have a multistep wizard. I need to validate some data inside one of the steps. If the validation fails I need to prevent the wizard from moving on to the next step.

Right now I'm doing this in the Next button click event of the step I'm validating:

var validator = $("#myForm").kendoValidator().data("kendoValidator");
var valState = validator.validate();
var wizard = $("#wizard").data("kendoWizard");

if(valState == true) {
   //do some stuff
}

//valState was not true, so do this -- this is where I want to stop the step from moving on
wizard.select(4) //4 is the index of the current step

But this doesn't seem to work. The stepper always moves on to the next step, regardless of what step I tell the wizard to select. The validations all fire and if you go back to this step, all the error messages show. But I want the error messages to show and the Next button not to go to next, and that doesn't seem to be working. How do I make this work?

Wizard

answered on 06 Apr 2023

1 answer

283 views

Wizard (asp.net mvc) how to get the from where which step the user came

Let us say the a wizard has 5 steps.
Where user goes from step 2 -> step 3, I want to do some activity.
Currently I use e.step.options.index inside onSelect method to do that.

function onSelect(e) {
    if (e.step.options.index == 3) {
       //do something
    }
}

The problem is the "//do something" is also executed when user comes to step 3 from step 4 (step 4 -> step 3).
I do NOT want this to happen. I want to prevent this from happening.

How do I do it?

How do I know which step the user came from?

Wizard

answered on 03 Aug 2021

1 answer

192 views

Wizard (asp.net mvc) wait for response before next step

I am building a wizard using Kendo asp.net mvc Wizard control.

I was wondering if there is a way to wait for an ajax response before proceeding to next step when required.

Eg: The wizard allows the user to add a user for the organization. One of the steps in between lets user choose a department, or create new one. If the user opts to create a new department, I call an ajax request which creates a department. All good till now.

However, I want to confirm the creation of the new department before user is shown the next step. If the department record creation is successful, next step is loaded. If not, the user stays in the same step.

Is this possible

Wizard

answered on 03 Aug 2021

1 answer

643 views

Wizard next save temporary result

Hi,

How can I save the results of all steps when filling in all the Wizard steps ? (in Telerik Asp.Net MVC Wizard control)

Lets say that step 2 is dependant on step 1 (screen should be rendedered with/without certain controls dependant of what was filled in on step 1.

How can I achieve this ?

Is there a serverside 'Next' click event or so ? Or a Select step event or so ? I havent seen it to my dissapointing surprise.

(I know I can load content tabs with Ajax, but that doesnt give me the entered data.)

Martin

Wizard

answered on 02 Jul 2021

9 answers

976 views

Wizard Submission

How can I submit the wizard's model to the Controller.i.e. on Done(), how can submit the binded model to the controller?

please hep. I am new and stuck on this.

Wizard

answered on 08 Nov 2020

6 answers

462 views

Changing the Step

function poWizardReset(e) {

if(e.sender.currentStep.options.index === 0) {

$initPo.val('');

$initPart.val('');

$initLineItem.value('');

$initAckId.value(0);

}

if (e.sender.currentStep.options.index === 1) {

$initVerifyPo.val('');

$initVerifyStockRoom.val('');

$initVerifySupCode.val('');

$initVerifySupName.val('');

$initVerifyLineItem.val('');

$initVerifyPart.val('');

$initVerifyUoM.val('');

$initVerifyAllowed.value(0);

}

if (e.sender.currentStep.options.index === 2) {

$finalPart.val('');

$finalPo.val('');

$finalLineItem.val('');

$finalAllowed.value(0);

$finalPrinterId.value(0);

$finalPackingSlip.val('');

$finalQuantity.value(0);

$finalCarrierTracking.val('');

$finalCarrierId.value(0);

$finalMulti.checked(false);

}

if (e.sender.currentStep.options.index === 3) {

}

On the reset button click and the corresponding event, how would I navigate between the steps?

Wizard

answered on 07 Oct 2020

1 answer

543 views

Grid in Wizard

Hi,

I'd like to add a grid in one of my steps but having a hard time figuring this out and no good examples. I'd like to load the content by calling my controller using the method ".LoadContentFrom("ActionName", "ControlerName");" which you have the ability to with many other controls but for now I think using a TemplateId will work?

Thanks,

Wizard

answered on 01 Oct 2020