Multiple Form Validation in Asp.net MVC using Jquery.valid()

Question

Here is my scenario i have 3 accordion layout. Each accordion contain 1 form. Like that

<div id="collapseOne">

@using(Html.BeginForm("","",FormMethod.Post,new{id="formOne"}))
{

    @Html.TextBoxFor(m=>m.Name)
    @Html.ValidationMessageFor(m=>m.Name)

    @Html.TextBoxFor(m=>m.City)
    @Html.ValidationMessageFor(m=>m.City)

    <input type="button" value="Next" id="btnOne" />

}

</div>
<div id="collapseTwo">


@using(Html.BeginForm("","",FormMethod.Post,new{id="formTwo"}))
{

    @Html.TextBoxFor(m=>m.Age)
    @Html.ValidationMessageFor(m=>m.Age)

    @Html.TextBoxFor(m=>m.Address)
    @Html.ValidationMessageFor(m=>m.Address)

    <input type="button" value="Next" id="btnTwo" />

}

</div>
<div id="collapseThree">

@using(Html.BeginForm("MyAction","MyController",FormMethod.Post,new{id="formThree"}))
{

     @Html.TextBoxFor(m=>m.Email)
     @Html.ValidationMessageFor(m=>m.Email)

     @Html.TextBoxFor(m=>m.City)
     @Html.ValidationMessageFor(m=>m.Email)

    <input type="submit" value="Finish" id="btnThree" />

}

</div>

Now validation checks doing well when i press Next Next in above accordions. But when someone comes directly to 3rd accordion and try to press finish then it validate only 3rd form. Here is my jquery

function PageEvents(){
  $("#btnThree").click(function(event){
    event.preventDefault();
    if($("#formOne").valid()==false){
      // Open first Accordion
    }
    else if($("#formTwo").valid()==false){
      //Open second Accodion
    }
    else{
      if($("#formThree").valid()){
         $("#formThree").submit();
      }
    }
  });

$("#btnOne").click(function (event) {
    event.preventDefault();
    if ($("#formOne").valid()) {
        //trigger accordion two
        $("collapseTwo").trigger("click");
    }
});
$("#btnTwo").click(function (event) {
    event.preventDefault();
    if ($("#formTwo").valid()) {
        //trigger accordion two
        $("collapseThree").trigger("click");
    }
});

If you want more description i will provide. Please guide me how to validate those forms which are not opened yet and user come directly in 3rd accordion and press finish button...

Thanks

Exactly @StephenMuecke but actually it is not wizard but act like wizard. — azhar_SE_nextbridge
– azhar_SE_nextbridge, Commented Dec 11, 2014 at 9:42
@azhar_SE_nextbridge. This answer shows an alernative using a single form and validating each section on the fly. I'm not sure how you could make this work. Your posting your back to the same method so if you post the 1st form - it would fail server side validation (e.g. if say the email was required) — user3559349
– user3559349, Commented Dec 11, 2014 at 9:46

Community · Accepted Answer · 2017-05-23 11:58:47Z

2

You have a problem with validatin hidden fields, jquery validation by default don't validate hidden fields, you can just change default:

$.validator.setDefaults({
    ignore: []
});

Buy also you can diasble tabs, that shouldn't be allowed here is example how to do it.

But the best way is to use miltistep Wizard like this.

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Dec 11, 2014 at 10:32

teo van kot

12.5k10 gold badges41 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

azhar_SE_nextbridge Over a year ago

but in this case when i click on btnThree then it returns all form valid even they are not valid yet..

azhar_SE_nextbridge Over a year ago

when whole div is hide then obviously it return true against validation.

teo van kot Over a year ago

now i get your problem, updated the answer with solution

azhar_SE_nextbridge Over a year ago

and if some controls are decision based like if dropdown value is yes selected then show Age textbox.. Till then it should be hide by default.By your solution it goes to validate all fields.

teo van kot Over a year ago

yes, you right. then maby it's easier to disable tabs that user can't use by your logic?

|

Collectives™ on Stack Overflow

Multiple Form Validation in Asp.net MVC using Jquery.valid()

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related