Client form validation not working with modal dialog in MVC

Because the form is not added to the page when the page loads, the unobtrusive validation will not pick it up. There are two ways to fix this.

  1. Include the form on the page during the initial load. This will cause the form to be recognized and validation will occur. You can throw the partial view in a hidden div. Then your JavaScript will just show the modal dialog.
  2. Manually register the form with the unobtrusive validation after adding it to the page. Something like $.validator.unobtrusive.parse("#id-of-the-form");

If you are loading the dialog dynamically just register the unobtrusive validation in the containing element's change event:

$('#modal-container').change(
    function() {
        $.validator.unobtrusive.parse("#your-form-id");
});