PHPを使用してブートストラップ・モーダルでフォームを検証する方法は？

Question

フォームが送信されると、フォームが検証されず、ページが更新されるためモーダルが閉じられます。フォームを提出する際にモーダルを開いたままにしておきたい。 PHPは、以下の通りである：

<div class="container"> 
    <div class="modal" id="myModal"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button class="close" data-dismiss="modal">x</button> 
        <h4 class="modal-title">Vote!</h4> 
       </div> 

       <div class="modal-body"> 
        <p> 
         Let us know what you think! <br/> 
         By voting, you as a student can have a say in the realisation of this project. Even if you vote 
         against having bees on campus, your vote is appreciated! <br/> 
         Thank you! 
        </p> 
        <form id="votingscreen" method="POST"> 
         <?php echo $result ?> 
         <div class="form-group"> 
          <label for="name">Name</label> 
          <?php echo $nameerror ?> 
          <input style="width: 180px" type="text" id="name" name="name" class="form-control" placeholder="Your name"> 
         </div> 
         <div class="form-group"> 
          <label for="studentID">Student ID</label> 
          <?php echo $studentiderror ?> 
          <input style="width: 180px" type="text" id="studentID" name="studentID" class="form-control" placeholder="123456AB"> 
         </div> 
         <div class="form-group"> 
          <label for="email">E-mail</label> 
          <?php echo $emailerror ?> 
          <input style="width: 180px" type="email" id="email" name="email" class="form-control" placeholder="E-mail"> 
         </div> 
         <hr /> 
         <div class="radiogroup"> 
          <label for="radiogroup"> Bees on campus? </label> 
          <label class="radio-inline"> 
           <input type="radio" name="vote" id="voteyesradio" value="yes" checked> 
           Yes 
          </label> 
          <label class="radio-inline"> 
           <input type="radio" name="vote" id="votenoradio" value="no"> 
           No 
          </label> 
         </div> 
         <div class="form-group"> 
          <input type="submit" name="submit" id="submitButton" class="btn btn-success btn-block" value="Vote!"/> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

：ここ

<?php 
$nameerror = $studentiderror = $emailerror = ""; 

$subject = "Thank you for voting!"; 
$body = "Dear $_POST["name"], Thank you for voting for this sustainable initiative. Your vote is appreciated! Lots of love from the Beefarm Committee of the Erasmus Sustainability Hub!"; 

if ($_SERVER["REQUEST_METHOD"] == "POST") { 

    if ($_POST["submit"]) { 

     if (empty(($_POST["name"])) { 
      $nameerror = "Please enter your name" } 


     if (empty($_POST["studentID"])) { 
      $studentiderror .= "Please enter your student ID"; 

     } else { 
      $result = "Thank you for voting!"; 
      mail($_POST["email"], $subject, $body); 
     } 

    }; 
} 

は、PHPは、フォームを提出した後に有効とされている場合、エラーメッセージが表示されなければならないHTMLに埋め込まれているモーダルのHTMLです

このJSコードです：

$(".contentContainer").css("min-height", $(window).height()); 
$("#image").css("min-height", $("#beeweek").height()); 
$(document).ready(function() { 

    $("#submitButton").click(function() { 

     $("#myModal").modal('show'); 
    }) 
}); 
$(".video-container").css("min-height", $(window).height()); 

Answer 1

あなたはページが更新されたくない場合は、アヤックスを使用してフォームを送信する必要があり、このリンクはあなたを助ける必要があり、jQuery Ajax POST example with PHP