jQuery UI Dialog on jQuery Validation Plugin in ASP.net: Can this work?

Question

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

$("#Dialog").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. Any ideas?

Answer 1

OK, well... I was fiddling with this anyways, so I might as well answer:

I only had to change a couple things to make this do what I think you want. See here for a working example: http://jsfiddle.net/ryleyb/HJFep/

Main change - in your Add function, changed the validate call to valid (see the Validation plugin docs 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....