jquery - Using built in ASP.NET MVC Validation with a wizard approach -
i using jquery steps plugin basic form example wizard.
in example notice using jquery validate plugin same plugin asp.net mvc uses automatically when submitting form.
i trying figure out how validate form fields in current step when user clicks continue, using asp.net mvc syntax since want data-annotations still work.
here asp.net mvc version of basic form example looks (notice have asp-for , asp-validation-for set 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 user clicks next name field validate. when user clicks next on step 2 city field validate, , on... used submitting single form @ once , allowing asp.net mvc automatically validate me, in case need ask validate several different times before actual submission.
here 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(); } });
Comments
Post a Comment