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?

Answer 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")); 

Answer 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");                    }         }    }); })