JQuery modal box form validation

Question

Hi, I was using a view to create an object for my specific project, but now I have to adapt this to another requirements, such as the creation of this object must be integrated in the creation of another one. The thing is, that this object must be created before starting to create the other one, and the way of doing it will be poping up a modal dialog box with JQuery with the form to create it. I've got to adapt the creation and it works fine, except for the validation messages. It is made in the controller like :

if (not.NotName.Trim().Length == 0)
{
    ModelState.AddModelError("NotName", "Name is required");
}
if (_notification.checkIfExists(not.NotName, not.NotRecID))
{
    ModelState.AddModelError("NotName", "Notification already exists");
}

And before with a normal view it worked fine, but now I'm not able to get the validation messages as I did. How can you get this validation messages thrown by the controller in the Modal Box? Because now when I made a mistake on purpose in the form in order to get the error it doesn't appear. I've seen the error is displayed in the site, because I've seen it on firebug, but it doesn't appear in my model box. How can I retrieve this errors? Do you know any tutorial that could help me with this?

The javascript method is:

function newNotificationModalBox() {
    $("#newNotificationModalBox").dialog("destroy");

    $("#newNotificationModalBox").dialog({
        modal: true,
        open: function(event, ui) {
            //resetNotificationForm();
        },
        buttons: {
            'Create': function() {
                var name = document.getElementById("NotName").value;
                var status = document.getElementById("NotificationStatus").value;
                var replace = document.getElementById("ReplaceYes").checked;
                var notificationToReplace = document.getElementById("ReplaceNotificationID").value;
                var dataString = 'NotName=' + name + '&NotificationStatus=' + status + '&Replace=' + replace + '&ReplaceNotificationID=' + notificationToReplace;
                $.ajax({
                    type: "POST",
                    url: "/Suspension/CreateNotification",
                    data: dataString
                    });
                var list = document.getElementById("sNotification").options.length;
                loadNotifications("/SearchSuspensions/LoadNotifications/", "A", "sNotification", "pNotificationName");
                alert('submitting form');
                //alert(document.getElementById("sNotification").options.length);
                if (list != document.getElementById("sNotification").options.length) {
                    $(this).dialog('close');
                    setTimeout('selectNotificationCreated();', 100);
                    alert('Notification succesfully created');
                }
                else {
                    alert('Error');
                }
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    });

}

Thank you

Answer 1

A possibliity is to create a partial view that renders the form. Then Create an action that will render the partial view. Now using AJAX load the partial view into the modal. When you post, the modal will post the form via AJAX. When the post returns, you will either be successful or it should return the form back to you with the errors, allowing you to reload the form and errormessages in the modal.