title: .Net MVC 4 Ajax Form Validation
body: <p>I´m having a problem with a ajax form validation (as I´ve seen many people have, but after hours of searching, I still haven´t found a proper answer).</p>
  
  <p>The AJAX-post is ok, and I get the response I want, but two things are not working as planned:</p>
  
  <ol>
  <li>The client-side validation doesn´t work.</li>
  <li>My Forms DataType(DataType(DataType.EmailAddress)), doesn´t work (type="text" is attribute of my , not type="email").</li>
  </ol>
  
  <p>I have included the following in the <code>&lt;head&gt;</code>:</p>
  
  <pre><code>&lt;script src="@Url.Content("~/Scripts/jquery-2.0.0.min.js")"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Static/js/MicrosoftAjax.js")" type="text/javascript&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Static/js/MicrosoftMvcAjax.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.js")"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>My form model is:</p>
  
  <pre><code>public class EventForm 
  {
      [Required(ErrorMessage = "First name must be filled")]
      public string FirstName { get; set; }
  
      [Required(AllowEmptyStrings = false,ErrorMessage = "Last Name must be filled")]
      public string LastName { get; set; }
  
      [DataType(DataType.EmailAddress)]
      [Required(AllowEmptyStrings = false, ErrorMessage = "Email must be filled")]
      public string Email { get; set; }
  
      [Required]
      [DataType(DataType.EmailAddress)]
      [Compare("Email",ErrorMessage = "Email adress do not match")]
      public string ConfirmEmail { get; set; }
  
      [DataType(DataType.PhoneNumber)]
      [Required(AllowEmptyStrings = false, ErrorMessage = "Phone number must be filled")]
      public string PhoneNumber { get; set; }
  
      [Required(AllowEmptyStrings = false, ErrorMessage = "Company Name must be filled")]
      public string CompanyName { get; set; }
  
      [Required(AllowEmptyStrings = false, ErrorMessage = "Adress must be filled")]
      public string Adress { get; set; }
  
      [Required(AllowEmptyStrings = false, ErrorMessage = "Zip must be filled")]
      public string Zip { get; set; }
  
      [Required(AllowEmptyStrings = false, ErrorMessage = "Postal city must be filled")]
      public string PostalCity { get; set; }
  
      public string Country { get; set; }
  
      public string Comment { get; set; }
  }   
  </code></pre>
  
  <p>And my view contains this form:</p>
  
  <pre><code>    @using (Ajax.BeginForm("Index", new AjaxOptions() { HttpMethod = POST",
      InsertionMode = InsertionMode.Replace, UpdateTargetId = "result" }))
          {
  
              &lt;div id="result"&gt;&lt;/div&gt;
  
              {
                  Html.EnableClientValidation(true);
              }
              @Html.ValidationSummary(false)
              @Html.ValidationMessageFor(p=&gt;p.EventForm)
              @Html.EditorFor(p=&gt;p.EventForm)
          }
  </code></pre>
  
  <p>And finally, my controller:</p>
  
  <pre><code>    public ActionResult Index(EventPage currentPage)
      {
          var model = new EventViewModel()
              {
                  CurrentPage = currentPage,
                  EventForm = new EventForm()
              };
  
          return View(model);
      }
  
      [HttpPost]
      public PartialViewResult Index(EventViewModel form)
      {
          return PartialView("PagePartial/FormSubmit", form.EventForm);
      }
  </code></pre>
  
  <p>Help?</p>