妥当性チェックとフォームが提出された後にのみモーダルを表示してください

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>