jquery - Where is it best to add a confirmation dialog popup -

i using asp.net mvc 4 , latest version of jquery ui , fluent validation handle server side validation.

i trying jquery dialog work confirmation popup before form submitted. user should click yes submit form or cancel stay on form.

i have googled , tried samples given can't work. have tried doing on button's click event, didn't work. trying add form submit.

my html markup:

<button id="savebutton" type="submit">save</button>  <div id="dialog-confirm" title="save customer?">      <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>are sure want save customer?</p> </div> 

my jquery code:

$(document).ready(function () {      $('form').submit(function () {           $('#dialog-confirm').dialog('open');           return false;      });       $('#dialog-confirm').dialog({           autoopen: false,           resizable: false,           modal: true,           buttons: {                'save': function () {                     $('form').sumbit();                },                cancel: function () {                     $(this).dialog('close');                }           }      }); }); 

the error using method above is:

object doesn't support property or method 

...and breaks on $('form').sumbit();

how work properly? , best add this? on button or when submitting form? both?

note: answers need based on jquery , jquery dialog control.

try 1 :

$('#dialog-confirm').dialog({       autoopen: false,       resizable: false,       modal: true,       buttons: [                 {                     text : 'save',                     click : function () {                         $('form').submit();                     }                 },                 {                     text : 'cancel',                     click : function () {                          $(this).dialog('close');                     }                 }             ]       }  });