jQuery dialog buttons do not trigger ValidationSummary

Question

Having worked with some small MVC-applications, I started working on a new MVC application from scratch. I have some functionality opening a PartialView in a jQuery dialog. This dialog allows the user to add a new Model of some kind. It is stored using a jQuery-button, so no submitbutton. Problem is, when the model is not valid (e.g. the required fields are not filled out) it does nog show a validation

Short story shorter; the dialog does what it needs to do, except for showing my validation through the dialog-buttons

In the main-layout i have the following references

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.24.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/MicrosoftAjax.debug.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/MicrosoftMvcValidation.debug.js")"></script>

Below the initialization of the DropDownList and button

<label>Area: </label>@Html.DropDownListFor(m => m.SelectedArea.ID, new SelectList(Model.Areas, "ID", "Code", Model.SelectedArea.ID), new { @onchange = "this.form.submit();" }) <input type="button" onclick="openAreaPopup(false)" value="Area toevoegen" />
<div id="addAreaDialog" style="display: none;"></div>

Then, following is placed inside tags

<script type="text/javascript">
function openAreaPopup(updateArea) {
  if (!updateArea) {
    $("#addAreaDialog").dialog({
      autoOpen: false,
      title: 'Area toevoegen',
      width: 500,
      height: 'auto',
      modal: true,
      buttons: {
        "Opslaan": function () {
          var thisDialog = this;
          var form = $('form', this);
          if ($(form).validate().form()) {
            $.ajax({
              type: "POST",
              url: "Area/Create",
              dataType: "json",
              data: JSON.stringify($(form).serialize())
            }).success(function (data) {
              if (data.success == true) {
                $(thisDialog).dialog("close");
                window.location.assign(window.location);
              }
            });
          }
        },
        "Annuleren": function () {
          $(this).dialog("close");
        }
      },
      hide: {
        effect: "fade",
        duration: 250
      },
      open: function (event, ui) {
        $(this).load("/Area/Create");
        $(this).load(options.url, function () {
          var $jQval = $.validator;
          $jQval.unobtrusive.parse($(this));
        });
      }
    });
  }
}
</script>

Area Model

public class Area
{
private List<Location> _locations;

public int ID { get; set; }
[Required(ErrorMessage = "This is required")]
public string Code { get; set; }
public string Description { get; set; }
public List<Location> Locations
{
  get
  {
    return _locations ?? (_locations = new List<Location>());
  }
  set
  {
    _locations = value;
  }
}
}

Controller-code:

[HttpGet]
public PartialViewResult Create()
{
  return PartialView();
}

//
// POST: /Area/Create
[HttpPost]
[ValidateInput(true)]
public ActionResult Create(FormCollection collection)
{
  var model = new Area();
  try
  {
    model.Code = collection["Code"];
    model.Description = collection["Description"].TrimEnd('\"');

    if (TryValidateModel(model))
    {
      // Area naar BLL sturen en opslaan
      _areaBLL.AddArea(ref model);
      return Json(new { success = true });
    }
    else
    {
      return PartialView();
    }
  }
  catch
  {
    return PartialView();
  }
}

and finally, the code of the Create.cshtml

@model PCLPro.Common.Models.Area

@using (Html.BeginForm())
{
  @Html.AntiForgeryToken()
  @Html.ValidationSummary(false, "De volgende velden zijn niet goed ingevuld")

<fieldset>
    <legend>Area</legend>

    <div class="editor-label">
  @Html.LabelFor(model => model.Code)
</div>
<div class="editor-field">
  @Html.EditorFor(model => model.Code)
  @Html.ValidationMessageFor(model => model.Code)
</div>

<div class="editor-label">
  @Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
  @Html.EditorFor(model => model.Description)
</div>

}

Answer 1

Stupid question, but did you add the jquery references for it to work?

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript">

I usually work with DataAnnotations such as [Required] etc. Could you show your Area model?

Answer 2

So, Googling for something else, i found this post has the answer to my problem. Since they are partial views i need to reparse the client side unobtrusive validation rules.

$('form').removeData('validator');
$('form').removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse('form');

adding that to the open-function of my dialog resolves my problem.