Question

I am using jquery dialog to display my form and I use MVC 3 unobtrusive client side validation on the form. Currently if user click on the Cancel button and the close icon: (x) button, the validation message will be shown.

It is weird since user might accidentally open a dialog and want to just close it, but the validation message shown beside those [Required] field is kind of annoying and funny.

I got no idea how to “control” this 2 buttons. I include the script which I initialize the buttons in my dialog here too:

     //Load food form into dialog
    var controllerUrl = '/Stock/GetFoodForm';
    var $createdialog = $('#createfooddialog').load(controllerUrl).dialog({
        autoOpen: false,
        title: 'Create Food',
        modal: true,
        width: 'auto'
    });

    $createdialog.dialog("option", "buttons", {
        "Cancel": function () {
            //alert('Cancel');
            $createdialog.dialog('close');
        },
        "Submit": function () {
            submitForm();
        }
     });

Hope can get some help here… Appreciate it…

Answer 1

I am now cancelled the eager effect of client side validation, so after click submit only user will see the message. I still cant find any solution for this yet