驗證檢查後只顯示模式，表格已提交

Question

目前有很多例子，我還沒有得到它的工作。我試圖加載我的模式只有一次我的表單已通過簡單的驗證，並已提交。現在它只是加載模式，當我點擊提交，即使它驗證失敗。

例如下面的例子，複選框是一個必填字段，如果我沒有檢查它並點擊提交驗證錯誤加載，但模態也是如此。

<form method="post" action="" data-toggle="modal" onsubmit="return myModal(this)"> 
     <input type="checkbox" name="vehicle" value="Bike" required>I accept this<br> 
     <button type="submit" value="Submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
     <input type="submit" value="Submit" /> 
</form> 

<div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 

      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 

       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 

     </div> 
    </div> 

我發現，用了jQuery示例在線和它的作品很好，但它不會加載一個模式。

<form method="post" action="" onsubmit="return muModal(this)"> 

    <input type="checkbox" name="vehicle" value="Accept" required>Accept<br> 

    <input type="submit" value="Submit" /> 
</form> 

<script> 
    function muModal(f) 
    { 
     var form=f, 
      modal=$('<div/>', { 
       'id':'alert', 
       'html':'<iframe src="http://test.com/preloader"></iframe>' 
      }) 
       .dialog({ 
        'modal':true, 
        'width':800, 
        'height':'auto', 
        'buttons': { 
         'OK': function() { 
          $(this).dialog("close"); 
          // do something, maybe call form.submit(); 
         } 
        } 
       }); 
     return false; 
    } 
</script> 

請注意，形式尚需提交，我只是想模態彈出，同時提交正在發生的事情。

Answer 1

我想這是你想要的，因爲我明白了嗎？

$('#myForm').on('submit', function(e) { 
 
    
 
    e.preventDefault(); //stop submit 
 
    
 
    if ($('#myCheck').is(':checked')) { 
 
    //Check if checkbox is checked then show modal 
 
    $('#myModal').modal('show'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<form method="post" action="" data-toggle="modal" id="myForm"> 
 
    <input id="myCheck" type="checkbox" name="vehicle" value="Bike" required>I accept this<br> 
 

 
    <input type="submit" value="Submit" /> 
 
</form> 
 

 

 
<div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 

 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div>