Need help displaying dialog window on submission of form only if form validates

Need help displaying dialog window on submission of form only if form validates

I've got a form that is using jquery validation.  When the user clicks the submit button, I would like a dialog window to display showing the fields and values entered from the form.  This is for verification.  If everything is fine, the user will click the OK button in the dialog window and the form will be submitted.  If not, the dialog window closes and the user is returned to the form.

But I only want the dialog window to display if the form validates.  Here's what I have:

  1. $(function(){
  2.     $("#form").validate();
  3.     $("#verification_dialog").dialog({
  4.         autoOpen: false,
  5.         buttons: {
  6.             "OK": function() {
  7.                 document.form.submit();
  8.             },
  9.             "Cancel": function() {
  10.                 $(this).dialog("close");
  11.             }
  12.         }
  13.     });
  14.     $("#form").submit(function() {
  15.         if (("#form").valid()) {
  16.             fillDialog();      // This function fills the dialog window with data from the form
  17.             $("#verification_dialog").dialog("open");
  18.                 return false;
  19.         }
  20.     });
  21. });

Can't seem to make the if statement work.  With it in there, the dialog never opens and the form submits.  Without it, the dialog window displays when I click submit, but it also shows it even if there were errors on the form.  I've put an alert window in to display the result of "#form".valid() when the user clicks submit and it comes back as true.

Been working on this issue since yesterday morning.  Help!