Jquery Ui dialog on form submit

I'm trying to stop jquery ui dialogs from popping up after 1 condition is met on form submit. One dialog per event is what I'm looking for. Kind of a break if a condition is met. Currently all dialogs come up after one is closed. I tried stopPropagation and stopImmediatePropagation with no effect. My code follows:

    $('#myForm').on('submit',function(e){
     if ($("#tramA").is(':checked') && !$('.tramAChecked:checked').length) {
                   $( "#tramA-message" ).dialog({
                    modal: true,
      draggable: false,
      resizable: false,
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
      }
});
e.preventDefault();
}

     if ($("#tramB").is(':checked') && !$('.tramBChecked:checked').length) {
     $( "#tramB-message" ).dialog({
                    modal: true,
      draggable: false,
      resizable: false,
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
      }
 });
e.preventDefault();
} 
});

HTML:

<div id="tramB-message" title="Warning">
  <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:3px 7px 50px 0;"></span>
    You selected "Tram B hall" but did not select a tram option!
  </p>
  </div>
  <div id="tramA-message" title="Warning">
  <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:3px 7px 50px 0;"></span>
    You selected "Tram A hall" but did not select a tram option!
  </p>
  </div>