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 dialog though.

This code works outside of the dialog DIV:

<script type="text/javascript">
$(document).ready(function() {
     $("form").validate();
     $("a").bind("click", function() { alert($("form").valid()); });
});
</script>

<form method="get" action="">
   <p>
     Name
     <input id="name" name="name" class="required" minlength="2" />
   </p>
   <p>
     E-Mail
     <input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <a href="#" id="clickTest">Click</a>
</form>

This works great. When i move the form into my dialog div, open dialog, and click the link it returns true, no bueno.

Is there any way to use this killer jquery validation plugin without having to use the <form> tag? Or is there an even better way of doing this successfully?

Solution 1

In case someone else comes across this, the jQuery-UI dialog does not append to the form, it appends just before </body>, so the elements to validate are outside the <form></form> section:

To resolve this, just direct the dialog to move itself inside the form when you create it, like this:

$("#mydiv").dialog("open").parent().appendTo(jQuery("form:first"));

Solution 2

You can use the valitidy jquery plugin

The javascript

function validateForm(){  
    $.validity.start();   
    // Required:  
    $("#recipientFirstName").require();  
    var result = $.validity.end();  
    return result.valid;  
}

$(document).ready(function() { 
    $('#dialog').dialog({
        autoOpen: false,   
        title: 'My title', 
        width: 600,  
        modal: true,  
        buttons: {  
            "Ok": function() {   
                if(validateForm()) {
                    saveOrder();
                    $(".validity-tooltip").css("display", "none"); 
                    $(this).dialog("close");  
                }
            },
            "Cancel": function() {
                // The following line was added to
                // hide the tool-tips programmatically:          
                $(".validity-tooltip").css("display", "none");
                $(this).dialog("close");       
            }
        }
   });
})

Solution 3

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

Solution 4

This may or may NOT be relevant however this was my problem and solution:

I had the exact same issue, when I opened the dialog my "form" tag got replaced with a "div", tag.

This was because I placed the dialog in an already opened form element, (obviously you can't have a form within a form)

Dont do what I did :)

<form>
    <form>

    </form>
</form>

Solution 5

Try giving your form an id like "myform".

Then try adding this call to the onclick event of your clicktest anchor :

onclick='return($("#myform").validate().form());'

instead of doing the validation in the document.ready.

View more solutions

Comments

[Garry English]

This doesn't fully work in IE7. See my answer for additional steps.

[onder]

I am getting error width this page :options is undefined [Break On This Error] options.isError = false;

[devio]

I think I came across this answer several times during research, before I realized what it means. devio.wordpress.com/2012/07/16/… Thanks!

[EliSherer]

The new dialog (jquery 1.10) has an appendTo option: $( ".selector" ).dialog({ appendTo: "form:first" });