2

I am using the JQuery Steps Plugin basic form example for my Wizard.

In this example you will notice they are using JQuery Validate plugin which is the same plugin ASP.NET MVC uses automatically when submitting a form.

I am trying to figure out how to validate just the form fields in the current step when the user clicks continue, but using ASP.NET MVC syntax since I want my data-annotations to still work.

Here is what my ASP.NET MVC version of the basic form example looks like (Notice that I have asp-for and asp-validation-for set for everything):

<form asp-action="Wizard" id="example-form">
    <div>
        <div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"></div>

        <h3>Basic Info</h3>
        <section>
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger" />
            </div>
        </section>
        <h3>Location</h3>
        <section>
            <div class="form-group">
                <label asp-for="City" class="control-label"></label>
                <input asp-for="City" class="form-control" />
                <span asp-validation-for="City" class="text-danger" />
            </div>
        </section>
        <h3>Contact Info</h3>
        <section>
            <div class="form-group">
                <label asp-for="ContactName" class="control-label"></label>
                <input asp-for="ContactName" class="form-control" />
                <span asp-validation-for="ContactName" class="text-danger" />
            </div>
        </section>
    </div>
</form>

For example, when the user clicks Next I would like the Name field to validate. When the user clicks next on step 2 I would like the City field to validate, and so on... I am so used to Submitting a single form all at once and allowing ASP.NET MVC to automatically validate for me, in this case I need to ask it to validate several different times before the actual submission.

Here is my JS:

var form = $("#example-form");
form.validate({
    errorPlacement: function errorPlacement(error, element) { element.before(error); },
    rules: {
        confirm: {
            equalTo: "#password"
        }
    }
});
form.children("div").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    onStepChanging: function(event, currentIndex, newIndex) {
        form.validate().settings.ignore = ":disabled,:hidden";
        return form.valid();
    },
    onFinishing: function(event, currentIndex) {
        form.validate().settings.ignore = ":disabled";
        return form.valid();
    },
    onFinished: function(event, currentIndex) {
        //alert("Submitted!");
        form.submit();
    }
});
5
  • If I understand correctly, this answer should help Commented Feb 8, 2016 at 21:40
  • @StephenMuecke I believe that example is very similar, but I still can't figure out how to do it. I know the code from the example you linked needs to be placed in the onStepChanging event setting in my code... but in the end my code is returning form.valid() which is slightly different.. Commented Feb 8, 2016 at 21:49
  • I'm at the point where I might just use jquery-validate as is like the jquery steps demo is using it and not use the built in mvc version. Commented Feb 8, 2016 at 22:01
  • Not familiar with the plugin, but suspect you would need something like form'.validate().element($(this.find('input')); return form.valid(); (assuming you have only one input in each section) Commented Feb 8, 2016 at 22:04
  • i've used this library before with a wizard and it was pretty simple to use.. it looks like it has been updated some since then though parsleyjs.org/doc/examples/multisteps.html Commented Feb 8, 2016 at 22:33

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.