title: How should I validate different sections of MVC3 page
body: <p>I am trying to understand how I should validate on the client sections of my MVC3 page independently and have come up with a simplyfied version of what I am trying to achieve. </p>
  
  <p>If I use one form:<br>
  Pros:   When I submit back to the "PostData" controller method I receive all data contained within the form. In this case both values "name" and "description", which means that I can instantiate "PersonHobbyModel" and assign the data I have received. I can either store in the database or I can return the same view.</p>
  
  <p>Cons: I cant validate independently. So if "name" isn't completed and I complete "description" I can still submit the page. (This is a simplyfied version of what I am trying to do and I would have more fields than just "name" and "description")</p>
  
  <p>With two forms:
  Pros: I can validate independently.</p>
  
  <p>Cons: The controller method only receives the subitted forms data which, in this case either "Persons name" or "Hobby description" which means that I can't recreate a full instance of "PersonHobbyModel".</p>
  
  <p>This is the model:  </p>
  
  <pre><code> public class Person {
  
      [Display(Name = "Person name:")]
      [Required(ErrorMessage = "Person name required.")]
      public string Name { get; set; }
  }
  
  public class Hobby {
  
      [Display(Name = "Hobby  description:")]
      [Required(ErrorMessage = "Hobby description required.")]
      public string Description { get; set; }
  }
  
  public class PersonHobbyModel {
  
      public PersonHobbyModel() {
          this.Person = new Person();
          this.Hobby = new Hobby();
      }
  
      public Person Person { get; set; }
      public Hobby Hobby { get; set; }
  }
  </code></pre>
  
  <p>This is the controller:  </p>
  
  <pre><code> public class PersonHobbyController : Controller
  {
      //
      // GET: /PersonHobby/
  
      public ActionResult Index()
      {
          var model = new PersonHobbyModel();
          return View(model);
      }
  
  
      public ActionResult PostData(FormCollection data) {
          var model = new PersonHobbyModel();
  
          TryUpdateModel(model.Person, "Person");
          TryUpdateModel(model.Hobby,"Hobby");
  
          return View("Index", model);
      }
  
  }  
  </code></pre>
  
  <p>This is the view:  </p>
  
  <pre><code>@model MultipleFORMStest.PersonHobbyModel
  @{
      ViewBag.Title = "Index";
  }
  &lt;h2&gt;
      Index&lt;/h2&gt;
  @using (Html.BeginForm("PostData", "PersonHobby")) {
      &lt;div&gt;
          @Html.LabelFor(model =&gt; model.Person.Name)
          @Html.TextBoxFor(model =&gt; model.Person.Name)
          @Html.ValidationMessageFor(model =&gt; model.Person.Name)
          &lt;input type="submit" value="Submit person" /&gt;
      &lt;/div&gt;
  }
  @using (Html.BeginForm("PostData", "PersonHobby")) {
      &lt;div&gt;
          @Html.LabelFor(model =&gt; model.Hobby.Description)
          @Html.TextBoxFor(model =&gt; model.Hobby.Description)
          @Html.ValidationMessageFor(model =&gt; model.Hobby.Description)
          &lt;input type="submit" value="Submit hobby" /&gt;
      &lt;/div&gt;
      }
  </code></pre>
  
  <p><strong>UPDATE 1</strong><br>
  I didnt mention, as I wanted to keep the question as simple as possible, but for one of the sections I am using "jquery ui dialog". I initially used a DIV to define the dialog, which I had inside my main form. This would of caused one problem as I wouldn't have been able to  validate on the client the "JQuery dialog form" independently from the rest of the form.   </p>
  
  <p>Saying this jquery did  removed the "div jquery ui dialog" from the main form which made me include the dialog in it's own form.  For this reason I have ended up with two forms.  The advantage is that I can now independently validate the "jquery dialog ui form".</p>
  
  <p>But I am confused as to how should I handle on the server data submited from various forms on the client as there is a chance that the user has JS disabled. If I submit from one form I can't access the data in other forms.  </p>
  
  <p><strong>UPDATE 2</strong><br>
  Thanks for the replies. I believe I do need two forms and two entities as I want to validate them independently on the client, (apart from being kind of forced to by "Jquery UI Dialog"). For instance if I have, instead of one hobby I have a list of hobbies, which I could posible display in a grid in the same view. So I could not fill in the person name, but continue to add hobbies to the grid, If I do not complete the hobby description I'd get a validation error. (Sorry as I should of included both of my updates in the initial question but for the purpose of clarity I wanted to keep it as simple as posible)</p>