jQuery UI Dialog validation without using <form> tags

Question

http://bassistance.de/jquery-plugins/jquery-plugin-validation/ looks to be the best jquery validation plugin out there. I can\'t seem to get it working in the jQuery UI dial

Answer 1

Nick Craver solution worked for me, however it doesn't fully work for IE7.

There is a bug in IE7 where it doesn't respect z-index for nested elements; therefore, if you move the dialog's parent into the form, the overlay will be over the dialog, preventing the user from interacting with the dialog. A fix for IE7 is to set the overlay's z-index to -1, then clone the overlay element and add it to the form just like you did for the dialog. Then in the close event of the dialog, remove the cloned overlay. IE7 Z-Index Layering Issues

Depending on your website layout, you might be able to just move the overlay and no need to clone it. I had to clone it, as my website layout has left and right margins, and I needed the overlay to cover the entire area. Below is an example of what I did:

var $dialog = $('#myDialog');
var $form = $dialog.parents('form:first');

$dialog.dialog({
    autoOpen: false,
    title: 'My Dialog',
    minWidth: 450,
    minHeight: 200,
    modal: true,
    position: ['center', 'center'],
    close: function () {
        // IE7 BUG: Needed to add an additional overload because of the z-index bug in IE7.
        $('.ui-widget-overlay-ie7fix:first').remove();
    },
    buttons: dialogButtons
});

$form.prepend($dialog.parent());
$dialog.dialog('open');

if ($.browser.msie && $.browser.version.slice(0, 1) == "7") {
    var $overlay = $('body .ui-widget-overlay:first');
    $form.prepend($overlay.clone().addClass('ui-widget-overlay-ie7fix'));
    $overlay.css('z-index', '-1');
}

Thanks, Garry