JS - フォームの記入が完了していないか確認してください。

Question

私のフォームに何か助けてください。現在、ユーザーがフォームを送信すると、フォームは（main.phpに）自己提出されます。フォームが完全に記入されているかどうかを確認するために提出する前に事前チェックをしたいと思います。ここで

は、フォームの私のHTMLです：

<div id="reqForm" class="modal"> 
       <div class="modal-content"> 
       <div class="modal-header"> 
        <span class="close">&times;</span> 
        <h2>Reimbersement Form</h2> 
       </div> 
       <div class="modal-body"> 
        <div class="form"> 
         <h2>Enter your information:</h2> 
         <br/> 
         <h3> 
         <form action="main" method="post" id="newRequest"> 
          <label>Full Name:</label> <input type="text" name="name" value="<?php echo $name; ?>" disabled/><br /> 

          <label>Reimberse Amount:</label> <input type="number" min="0" name="amount" /><br /> 
          Customer Name: <select name="customerName" id="cN"><option value="" id='cPlSe' selected>--Select--</option><?php 
          echo $optionC; 
          ?></select><br />Project Name: <select name="projectName" id="pN"><option value="" id='plSe' selected>Please select customer name </option><option value="">--Select--</option><?php 
          echo $optionP; 
          ?></select><br /> 
          <label>Reason (max length 255 characters): </label><br /><textarea cols="40" rows="1" form="newRequest" name="reason"></textarea><br /> 
          <input type="hidden" name="submitted"/> 

         </h3> 
        </div> 
       </div> 
       <div class="modal-footer"><br /> 
        <input type="submit" id="submit"/> 
        </form> 
       </div> 
       </div> 
      </div> 

と私のPHP：

if(isset($_POST["submitted"])){ 
        $name = $_SESSION["name"]; 
        $amount = $_POST["amount"]; 
        $projectName = $_POST["projectName"]; 
        $customerName = $_POST["customerName"]; 
        $reason = $_POST["reason"]; 
        $d = array("name"=>$name,"amount"=>$amount,"projectName"=>$projectName,"customerName"=>$customerName,"reason"=>$reason); 

        foreach($d as $i) { 
         if("" == trim($i)) { 
          echo "Make sure you have filled out all the fields. Click <a href='main'>here</a> to go back."; 
          exit(); 
         } 
        } 


        foreach($d as $i) { 
         mysqli_real_escape_string($connect, $i); 
        } 
        $name = $d["name"]; 
        $amount = $d["amount"]; 
        $projectName = $d["projectName"]; 
        $customerName = $d["customerName"]; 
        $reason = $d["reason"]; 

        $query = "INSERT INTO `requests` (`Name`, `Amount`, `ProjectName`, `CustomerName`, `Reason`) VALUES " . "('" . $name . "', '" . $amount . "', '" . $projectName . "', '" . $customerName . "', '" . $reason."');"; 

        if (mysqli_query($connect, $query)) { 
         echo "Success!"; 
        } else { 
         echo "Error: " . $query . "<br>" . mysqli_error($connect); 
        } 
       } 

注：https://www.w3schools.com/howto/howto_css_modals.asp

Answer 1

<input required></input> 

に見られるように、私はフォームのモーダルを使用しています

入力タグの '必須'属性を使用できます

Answer 2

こんにちは、サードパーティ製のライブラリを使用できる場合、私はparsleyJsを使用することをお勧めします。これで、

$('form').parsley().validate() を使用して、フォームが有効かどうかを確認できます。 「必要」

そして、あなたはすべてが満たされていることを確認したい場合は、requiredタグを使用する必要があり、また、あなたが他のタイプとタグ https://www.w3schools.com/html/html_form_input_types.asp