Why is this jquery dialog window not displaying?

Question

I've got a form that is using jquery validation. When the user clicks the submit button, I've got some jquery that intercepts the submit and should display a dialog window asking the user to verify the information they entered on the form. This dialog window should only display if the form has validated. Here is my code:

$('#form').submit(function(){
    fillVerificationDialog();   /* This loads up the dialog with form data */
    if (('#form').valid()){
        $('verification_dialog').dialog('open');
        return false;
    }
});

My dialog window is not displaying. It just submits the form. And I've verified that the form is valid by using an alert that checks the value of $('#form').valid()

If I remove the if statement and just have the line that opens the dialog, the dialog displays. However, it will display even if the form has errors which is what I'm trying to prevent.

Answer 1

Make sure you initialize the dialog before trying to open it.

$('#verification_dialog').dialog({ autoOpen: false });

Missing the # in your selector. Since the selector you are looking to use is most likely an id of a div, the dialog will not open, since it's missing the #.

$('#verification_dialog').dialog('open');

Answer 2

Are you sure that you're calling validate on the form before it's being submitting and setting up the dialog?

$('#form').validate();
$('#verification_dialog').dialog({
     autoOpen: false,
     buttons: {
         'OK': function() {
                 ... do form submission...
               },
         'Cancel': function() {
                 $(this).dialog('close');
               }
    }
 });
$('#form').submit(function(){ 
    if (('#form').valid()){
        fillVerificationDialog();   /* This loads up the dialog with form data */ 
        $('#verification_dialog').dialog('open'); 
    } 
    return false;
});