jQuery UI dialog on the jQuery Validation plugin in ASP.NET: Can this work?

I'm currently trying to run the jQuery Validation plugin inside a jQuery dialog. The code is as such in the document.ready function:

$("#D开发者_高级运维ialog").dialog({
    bgiframe: true,
    autoOpen: false,
    height: 600,
    width: 590,
    modal: true,
    resizable: false,
    open: function (type, data) {
        $(this).parent().appendTo("#aspnetForm");
    },
    close: function () { }
});

$("#aspnetForm").validate({
    rules: {
        <%=txtCode.UniqueID %>: {
            required: true
        },
         <%=txtDescription.UniqueID %>: {
            required: true
        },
        <%=txtMallCode.UniqueID %>: {
            required: true
        }
    }, messages: {}
});

In the pageLoad function, I have:

$(".Add").unbind();
$(".Add").click(function (e) {
    e.preventDefault();
    var ctrl = GetPrefixSuffix($(this).attr('id'), 'btnAdd');

    $("#Dialog").dialog('option', 'buttons',
    {
        'Add': function () {
            if ($("#aspnetForm").validate()) {
               //Do some stuff
                $(this).dialog('close');
            }
        },
        'Cancel': function () {
            $(this).dialog('close');
        }
    });
    $("#Dialog").dialog('open');
});

I can't actually get the jQuery dialog to show any errors, but it is stopped by the conditional and doesn't close the dialog. How can I fix it?

See here for a working example: http://jsfiddle.net/ryleyb/HJFep/

Main change - in your Add function, I changed the validate call to valid (see the Validation plugin documentation for the difference). I also had it return false if the form was not valid.

I didn't particularly understand why you had the open function for your dialog:

open: function (type, data) {
    $(this).parent().appendTo("#aspnetForm");
}

So my answer just ignored that...