Client form validation does not work with modal dialog in MVC

Question

I am changing the form of creation to become a modal dialog and jquery. An unobtrusive check stops working and does not know how to fix it.

Index.cshtml has a link to launch a modal dialog.

<a href="#" id="createCustomer">Create</a> @section scripts{ <script type="text/javascript"> $('#createCustomer').on('click', function () { $.get('/Customer/Create', function (data) { $('#modalContainer').html(data); $('#myModal').modal({}); }); }); 

Create.cshtml is a partial view.

 @model Demo.Web.Models.CustomerVm @using (Html.BeginForm("Create", "Customer", FormMethod.Post, new { @id="createForm" })) { @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>Customer</h4> <hr /> @Html.ValidationSummary(true) <div class="form-group"> @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Create" class="btn btn-default" /> </div> </div> </div> } @section Scripts { @Scripts.Render("~/bundles/jqueryval") } 

There is an actionmethod on the controller that returns a partial view for the create form.

 public ActionResult Create() { return PartialView("Create"); } 

viewing modal

 public class CustomerVm { [Required] public int Id { get; set; } [Required] public string Name { get; set; } } 

before I changed it as a modal dialogue .. everything worked, but now I don’t know how to fix it. How can I validate with a dialog? Obviously, I do not want to rewrite the validation rules on the client script .. I want to make it work with the view model. Thanks.

Answer 1

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

• Include the form on the page at boot time. This will lead to the recognition of the form and its verification. You can cast a partial view in a hidden div. Then your JavaScript will just show a modal dialog.
• Manually register a form with unobtrusive validation after adding it to the page. Something like $.validator.unobtrusive.parse("#id-of-the-form");

Answer 2

If you load the dialog dynamically, simply register an unobtrusive check in the element change event:

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

Answer 3

In a partial view of the create → modal-header, model-body, modal-footer and javascript page in <script>your code </script> - do not put <script>your code</script> in @section Scripts{} , and it will work.

Answer 4

Just add the following scripts to your form form view:

 <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"> </script>