How do I get a jQuery dialog window to display only if a form validates when I click the submit button?

Question

I've got a form that is using jQuery validation. When the user clicks the submit button, a dialog window displays thatshows the fields the user filled out along with the data the user entered. It asks the user if this information is correct. If it is, the user clicks the submit button in the dialog window and the form is submitted. If the user clicks the 'Fix it' button, the dialog window closes and the user returns to the form.

My problem is my dialog window displays when the user clicks the form's submit button even if there are errors in the form. I only want to display the dialog window if the form data is validated by jQuery. How do I do this?

I'm thinking of something like:

if (('#form').validates() == true) {
    $('#verification_dialog').dialog('open');
}

Is there a way in jQuery to determine whether the whole form has validated? Or do I have to create my own function to do this?

Answer 1

To get a boolean value for validation you can use:

if($('#form').validate().form()){
 ...
}

Answer 2

try

$("#form").validate({....});

if (('#form').valid()) {
    $('#verification_dialog').dialog('open');
}

more on .valid()

edit

here's my work around on that...

  var _form;
  $("#myform").validate({
    //.... other options
     meta: "validate",
     submitHandler: function(form) {
       // triggers only if form is valid....
       _form = form; // capture the form....
       $('#verification_dialog').dialog('open');
       return false; // stop submit...
     }
  })
  $('#verification_dialog').dialog({
     //.... other options
     autoOpen: false,
     buttons : {
          "Accept" : function(){             
              _form.submit(); // submit the captured form...
          }
     }
  });

quick demo