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

Popular posts from this blog

java - pagination of xlsx file to XSSFworkbook using apache POI -

Unlimited choices in BASH case statement -

apache - How do I stop my index.php being run twice for every user -