Modal中的空字段可以防止AJAX在接受時運行

Question

我有一個通過單擊按鈕打開的模式。然後有一個文本框是必需的，如果沒有輸入任何內容和接受點擊彈出說請輸入經銷商名稱出現。問題是，我仍然接受關閉模式並提交給數據庫。我認爲它是因爲這條線，當我打電話給JSON後$('#addDealer').on('submit', function (e) {並覆蓋警報。在那裏它應該停下來，等待進入的東西，除非取消選擇模式纔會關閉。我一直試圖結合提交和.click，但我沒有得到任何地方。

我不想讓ajax運行，如果選擇接受並且沒有任何內容輸入到$("#NewDealerName")，因爲不需要向數據庫發送任何內容。

任何幫助將不勝感激。

http://jsfiddle.net/spe2mv5t/

HTML

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#NewDealer"><u>N</u>EW</button> 

    <!-- New Dealer Modal --> 
    <div class="modal fade" id="NewDealer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 

     <div class="modal-content"> 
      <form id="addDealer"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
      <h4 class="modal-title" id="NewDealerLabel">New Dealer</h4> 
      </div> 
      <div class="modal-body"> 

      <div class="row"> 
       <div class="col-xs-12"> 
        <label for="NewDealerName">Please enter the dealer name:</label> 
        <input type="text" class="form-control" name="NewDealerName" id="NewDealerName" maxlength="50"> 
       </div> 
      </div> 


      </div> 
      <div class="modal-footer group"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
      <button type="submit" class="btn btn-primary dealer_accept">Accept</button> 
      </div> 
       </form> 
     </div> 
     </div> 
    </div> 
    <!-- End New Dealer Modal --> 

JS

$(document).ready(function() { 
    // What happens when a user hits the "Accept" button on the dealer form 
    $(".dealer_accept").click(function(){ 
     var NewDealerName = $("#NewDealerName").val(); 
     if (!NewDealerName){ 
      alert("Please enter the dealer name."); 
     } else { 
     $('#NewDealer').modal('hide'); 
     } 
    }); 

    $('#addDealer').on('submit', function (e) { 
     e.preventDefault(); 
     //alert($(this).serialize()); 
     $.ajax({ 
      // the location of the CFC to run 
      url: "proxy/NewDealerSession.cfm", 
      // send a GET HTTP operation 
      type: "post", 
      // tell jQuery we're getting JSON back 
      dataType: "json", 
      // send the data to the CFC 
      data: $('#addDealer').serialize(), 
      // this gets the data returned on success 
      success: function (data) { 
       console.log(data); 
       window.location.reload(); 
      }, 
      // this runs if an error 
      error: function (xhr, textStatus, errorThrown) { 
       // show error 
       console.log(errorThrown); 
      } 
     }); 
    }); 
}); 

Answer 1

你應該return false在你的處理器，如果你不想的形式提交。

Updated fiddle