CODEWITHSUNDEEP
jqueryasp.net-mvcjquery-validateunobtrusive-validation
Mike Diaz
Mike Diaz

Reputation: 2065

Modal Popup Jquery Validation with MVC

I am loading a Modal popup form using PartialView

The code

 $("#modalContainer").load('@Url.Action("NewRefill","Car",new {[email protected]})');

                        $.validator.unobtrusive.parse($("#modalContainer form"));

                        $("#addNewEntryModal").modal('show');

in my Controller I have

[HttpPost]
        public ActionResult NewRefill(Car car,int car)
        {
            if (ModelState.IsValid)
            {


            }
            return Json(new { Success = false });

        }

This is a Modal popup. Every time You hit submit, it automatically forwards you to a new page. What I would like it to do would be to Keep the Modal open and show the Errors that happen. I have tried binding to the Submit event and stopping it to no avail. The validations do work since I see the Red borders but I get forwarded and see the Success=false

Upvotes: 0

Views: 7767

Answers (2)

mcfea
mcfea

Reputation: 1139

    $.validator.unobtrusive.parse($('#' + popupID));

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038830

You are not parsing the jQuery unobtrusive validations at the right place. You should do that once you load the partial, inside the success callback:

var url = '@Url.Action("NewRefill", "Car", new {car = @Model.Id})';
$('#modalContainer').load(url, function() {
    $.validator.unobtrusive.parse($("#modalContainer form"));
    $("#addNewEntryModal").modal('show');
});

Also if inside this partial you are using an Ajax.BeginForm helper to generate the form make sure that you have included the jQuery.unobtrusive-ajax.js script to your page for this to work. And if it is a normal Html.BeginForm you should AJAXify it if you want it to be submitted with an AJAX request instead of a normal request:

var url = '@Url.Action("NewRefill", "Car", new {car = @Model.Id})';
$('#modalContainer').load(url, function() {
    var form = $("#modalContainer form");
    $.validator.unobtrusive.parse();
    $("#addNewEntryModal").modal('show');
    form.submit(function() {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function(result) {
                ...
            }
        });
        return false;
    });
});

Upvotes: 4

Related Questions