Using built in ASP.NET MVC Validation with a wizard approach
<p>I am using the <a href="http://www.jquery-steps.com/Examples#basic-form" rel="nofollow">JQuery Steps Plugin basic form example</a> for my Wizard.</p>

<p>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.</p>

<p>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.</p>

<p>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):</p>

<pre><code>&lt;form asp-action="Wizard" id="example-form"&gt;
    &lt;div&gt;
        &lt;div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"&gt;&lt;/div&gt;

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

<p>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.</p>

<p>Here is my JS:</p>

<pre><code>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();
    }
});
</code></pre>