jQuery UI Dialog + Validate

When you initialize the jQueryUI dialog, it modifies the DOM, the whole dialog is taken out of it's location in the page and inserted right before the </body> tag. You can see this with Firebug. This causes a problem for Validate, because now the form is empty. To solve this, on the dialog's open event, append it to the form. It sounds really wacky, but trust me, it works :)

dialog.dialog({    title: a.attr('title') ? a.attr('title') : '',    modal: true,    buttons: {      'Save': function() {submitFormWithAjax($(this).find('form'));},      'Cancel': function() {$(this).dialog('close');}    },    close: function() {$(this).remove();},    open: function(){        $(this).parent().appendTo($('#event_form'));    },    width: 'auto'  });

Edit:

<form id='event_form'>  <div id="dialog" title="DialogTitle">   </div></form>

Took a slightly different approach to this. I needed to reuse my modal form so I append it once jquery "creates" the modal:

    $("#mdl_Subject").dialog({    autoOpen: false,    show: "drop",    hide: "drop",    modal: true,    create: function () {        $(this).parent().appendTo($('#aspnetForm'));    }});