How do I handle server side validation error if I have a form running inside a jQuery UI dialog?

asp.net-mvc, dialog, jquery, validation

Solution

As said

But in this case i want to keep the dialop open and simply show these errors inside the dialog

Ok.

After openning the dialog, you have to

- hide previous error message

...

open: function(event, ui) {
    $(".error").css("display", "none");
}

After clicking dialog button, you have to

- disable JQuery UI

- Show "loading..." image

- Send form

...

$("#loading").css("display", "block");

panel.dialog("disable");

panel.dialog("option", "disabled", true);

After response is loaded (You can use JSON as response), you have to

- Check whether it has errors.

...

// var response plays the role of JSON response

var response = {
    "errors":[
        {
            "property-name":"name",
            "error":"Name is required"
        },
        {
            "property-name":"age",
            "error":""
        }
    ]
};

var hasErrors = false;

for(var i = 0; i < response.errors.length; i++) {
    if(response.errors[i].error != "") {
         hasErrors = true;

         $("#" + response.errors[i]["property-name"] + "-error")
           .text(response.errors[i]["error"])
           .css("display", "block");
    }
}

if(!hasErrors) {
    panel.dialog("close");

    alert("success form!");
} else {
    panel.dialog("enable");

    panel.dialog("option", "disabled", false);
}

Here you can see in Action

Notice you have a default behavior. So you can put it inside a external function

Problem

I have the following code in my controller after the user posts the form but if the validation fails (_applicationValidator.Validate), I normally reload the "Edit" view but in this case I want to keep the dialog open and simply show these errors inside the dialog. Controller Code: ``` [AcceptVerbs(HttpVerbs.Post)] public ActionResult Update(ApplicationUpdater applicationUpdater_) { if (_applicationValidator.Validate(applicationUpdater_, ModelState, ValueProvider)) { _repo.UpdateApplication(applicationUpdater_); ApplicationsViewModel vm = new ApplicationsViewModel(); vm.Applications = _repo.GetApplications(); return View("Index", vm); } else { ApplicationViewModel vm = GetApplicationVM(); return View("Edit", vm); } } ``` View Code (jQuery) ``` $(".showEditPopup").click(function() { $.post("Applications/ShowEdit", { recnum: $(this).parents('tr:first').attr("recnum") }, function(htmlResult) { $("#EditUserControlDiv").remove(); $("#container").append(htmlResult); $("#container select[multiple]").asmSelect(); $("#EditUserControlDiv").dialog( { height: 675, width: 650, modal: true } ); } ); }); ```

Original source