Client form validation not working with modal dialog in MVC

Question

I am changing a create form to become a modal dialog and jquery Unobtrusive validation stops working and don't know how to fix it.

Index.cshtml has a link to trigger 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")        
}

On the controller there is an actionmethod which returns a partial view for create form.

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

view modal

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

before i changed it to be a modal dialog .. everything was working but now i don't know how to fix it. How can i make validation work with dialog? Obviously, I don't want to rewrite validation rules on client script .. i want to get it working from view model .. thanks.

score 55 · Accepted Answer · answered May 27 '14 at 12:54

55

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.

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.
Manually register the form with the unobtrusive validation after adding it to the page. Something like $.validator.unobtrusive.parse("#id-of-the-form");

answered May 27 '14 at 12:54

cadrell0

17,109
5
51
69

thanks cadrell0 .. where do i put $.validator.unobtrusive.parse? – Laurence May 27 '14 at 13:16
1

Yap this does work perfectly. Third option: Load the jquery, validation and unobtrusive libraries in the dialog page, if the (separate) page is being loaded by a dialog. – Dave Agaba Sep 18 '14 at 11:54
You got an upvote from me, that fixed it for me too. Thanks again. – Andy Evans Jul 25 '15 at 00:14
I cannot figure this out! I have a form inside a form. Should the forms be separate? – Jarrette Nov 03 '16 at 17:17
1

FML wasted like 6 months not knowing this. – Worthy7 Jan 31 '17 at 10:49
THE ANSWER IS COPIED FROM https://www.itorian.com/2015/05/mvc-client-side-validation-not-working.html – Sujoy Jul 16 '20 at 08:05
1

The answer was posted a year before the linked blog post. It's probably the other way around. – cadrell0 Jul 16 '20 at 18:49
@cadrell0 Please where can I put $.validator.unobtrusive.parse("#id-of-the-form"); – Abdulsalam Elsharif Aug 03 '22 at 18:00

score 12 · Answer 2 · answered Sep 15 '16 at 03:22

12

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");
});

answered Sep 15 '16 at 03:22

ComeIn

1,519
17
12

1

No. The accepted answer says "Include the form on the page during the initial load. " My suggestion is to add the change event listener to the element that will contain the dialog when it is Dynamically injected. This is a better fit if you are dynamically injecting a form from a partial view, which is what the question is about. – ComeIn Sep 16 '16 at 01:53

score 1 · Answer 3 · edited Jul 12 '16 at 23:35

1

In partialview of create page -> modal-header, model-body, modal-footer and javascript code in the <script>your code </script> - don't put <script>your code</script> in @section Scripts{} and it will work.

edited Jul 12 '16 at 23:35

wake-0

3,918
5
28
45

answered Jul 12 '16 at 20:00

Sanjay

11
1

score 1 · Answer 4 · edited Mar 09 '18 at 11:29

1

Just add the following scripts in your Create 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>

edited Mar 09 '18 at 11:29

jps

20,041
15
75
79

answered Mar 09 '18 at 10:12

Sam

81
6

score 0 · Answer 5 · answered Aug 28 '20 at 18:44

Adding a new comment to share a more modern solution:

Use BundleConfig.cs in the App_Start folder of your MVC project.

namespace MySolution
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/Site.min.css",
                "~/Content/bootstrap.min.css"));

            bundles.Add(new ScriptBundle("~/Scripts/js").Include(
                "~/Scripts/jquery-3.3.1.min.js",
                "~/Scripts/jquery.validate.min.js",
                "~/Scripts/jquery.validate.unobtrusive.min.js"));
        }
    }
}

how this is helping on achieving the "modal" validation? – znn Jun 29 '23 at 16:26 — znn, Jun 29 '23 at 16:26

Client form validation not working with modal dialog in MVC

5 Answers5

Linked