title: MVC 4 Validation with a partial view
body: <p>I'm using MVC 4 and Entity Framework to develop a web app. I'm working with partial views which are loaded with javascript. One of them is a create view which includes validation. And that's my problem : the validation. I have a custom validation logic and, for example, if a user enters some numbers into a field such as "Name", it displays an error.</p>
  
  <p>Here, with the partial views, it redirects me on my partial with the errors displayed but what I wanted to do is to stay on my main view (Index view) and keep my partial view which displays the errors.</p>
  
  <p>EDIT : </p>
  
  <p>Here is my partial view : </p>
  
  <pre><code>@model BuSIMaterial.Models.Person
  
  @using (Html.BeginForm()) {
      @Html.ValidationSummary(true)
      &lt;fieldset&gt;
          &lt;legend&gt;Person&lt;/legend&gt;
  
          &lt;div class="editor-label"&gt;
              First name : 
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.TextBoxFor(model =&gt; model.FirstName, new { maxlength = 50 })
              @Html.ValidationMessageFor(model =&gt; model.FirstName)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              Last name : 
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.TextBoxFor(model =&gt; model.LastName, new { maxlength = 50 })
              @Html.ValidationMessageFor(model =&gt; model.LastName)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              National number : 
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.TextBoxFor(model =&gt; model.NumNat, new { maxlength = 11 })
              @Html.ValidationMessageFor(model =&gt; model.NumNat)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              Start date : 
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.TextBoxFor(model =&gt; model.StartDate, new {@class = "datepicker", @placeholder="yyyy/mm/dd"})
              @Html.ValidationMessageFor(model =&gt; model.StartDate)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              End date : 
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.TextBoxFor(model =&gt; model.EndDate, new { @class = "datepicker", @placeholder = "yyyy/mm/dd" })
              @Html.ValidationMessageFor(model =&gt; model.EndDate)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              Distance House - Work (km) : 
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.HouseToWorkKilometers)
              @Html.ValidationMessageFor(model =&gt; model.HouseToWorkKilometers)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              Category : 
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.DropDownList("Id_ProductPackageCategory", "Choose one ...")
              @Html.ValidationMessageFor(model =&gt; model.Id_ProductPackageCategory) &lt;a href = "../ProductPackageCategory/Create"&gt;Add a new category?&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              Upgrade? : 
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.Upgrade)
              @Html.ValidationMessageFor(model =&gt; model.Upgrade)
          &lt;/div&gt;
  
          &lt;br /&gt;
  
          &lt;div class="form-actions"&gt;
            &lt;button type="submit" class="btn btn-primary"&gt;Create&lt;/button&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  }
  
  
  @section Scripts {
      @Scripts.Render("~/bundles/jqueryval")
      @Scripts.Render("~/bundles/jqueryui")
      @Styles.Render("~/Content/themes/base/css")
  }
  </code></pre>
  
  <p>In my view Index, I have this : </p>
  
  <pre><code>&lt;div class="form-actions"&gt;&lt;button type="button" id="create" class="btn btn-primary"&gt;Create&lt;/button&gt; &lt;/div&gt;
  &lt;div id ="create_person"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And the way I load my Partial View : </p>
  
  <pre><code>            $("#create").click(function () {
                  var form = $("#create_person").closest("form");
                  form.removeData('validator');
                  form.removeData('unobtrusiveValidation');
                  $.validator.unobtrusive.parse(form);
  
                  $.ajax({
                      url: "/Person/CreateOrUpdate",
                      type: "POST",
                      data: $("#create_person").serialize(),
                      cache: false
                  });
  
  //                var url = '/Person/CreatePerson';
  //                $("#create_person").load(url);
  
              });
  </code></pre>
  
  <p>The actions : </p>
  
  <pre><code>[HttpGet]
          public ActionResult CreateOrUpdate()
          {
              ViewBag.Id_ProductPackageCategory = new SelectList(db.ProductPackageCategories, "Id_ProductPackageCategory", "Name");
              return View();
          }
  
  
          [HttpPost]
          public JsonResult CreateOrUpdate(Person person)
          {
              ViewBag.Id_ProductPackageCategory = new SelectList(db.ProductPackageCategories, "Id_ProductPackageCategory", "Name", person.Id_ProductPackageCategory);
  
              try
              {
                  if (!ModelState.IsValid)
                  {
                      string messages = string.Join("; ", ModelState.Values
                                          .SelectMany(x =&gt; x.Errors)
                                          .Select(x =&gt; x.ErrorMessage));
                      throw new Exception("Please correct the following errors: " + Environment.NewLine + messages);
                  }
  
                  db.Persons.AddObject(person);
                  db.SaveChanges();
  
                  return Json(new { Result = "OK" });
              }
              catch (Exception ex)
              {
                  return Json(new { Result = "ERROR", Message = ex.Message });
              }
          }
  </code></pre>