问题
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();
}
});
来源:https://stackoverflow.com/questions/35279785/using-built-in-asp-net-mvc-validation-with-a-wizard-approach