CODEWITHSUNDEEP
asp.net-mvcdata-annotationsunobtrusive-validationasp.net-mvc-viewmodel
Laurence
Laurence

Reputation: 7823

Client form validation not working with modal dialog in MVC

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.

Upvotes: 19

Views: 29340

Answers (5)

Jamie
Jamie

Reputation: 1679

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

Upvotes: 0

Sam
Sam

Reputation: 81

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>

Upvotes: 1

ComeIn
ComeIn

Reputation: 1609

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

Upvotes: 12

Sanjay
Sanjay

Reputation: 11

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.

Upvotes: 1

cadrell0
cadrell0

Reputation: 17327

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

Upvotes: 54

Related Questions