JSをHTMLフォームに使用してファイルタイプを検証した後で、無効な場合、同じページにコントロールする必要があります

Question

htmlのformがありますが、pdf、docx、docファイルのみが必要です。私は正常に検証することができますが、OKボタンをクリックすると、フォームが無効であれば投稿したくありません。現在、connection.phpに行きます。私は検証に成功したときだけconnection.phpに行くべきです。

<form method="POST" action="connection.php" enctype="multipart/form-data" onsubmit="function()"> 
<input type="text" id="name" name="bookname" placeholder="Book Name" required/> 
<textarea cols="25" rows="4" name="bookdesc" placeholder="Book Description" required></textarea> 
<input type="text" id="password" name="bookauthor" placeholder="Book Author"/ required> 
<input type="file" name="bookfile" id="bookfile" required/> 
</form> 
    <script> 
     $(document).ready(function() { 
     $('input[type=file]').change(function() { 
     var val = $(this).val().toLowerCase(); 
     var regex = new RegExp("(.*?)\.(docx|doc|pdf)$"); 
     if(!(regex.test(val))) { 
     $(this).val(''); 
     alert('Please select correct file format'); 
     } }); }); 
    </script> 

Answer 1

使用onsubmitイベント：

<form method="POST" action="connection.php" enctype="multipart/form-data" onsubmit="return validate()"> 
<input type="text" id="name" name="bookname" placeholder="Book Name" required/> 
<textarea cols="25" rows="4" name="bookdesc" placeholder="Book Description" required></textarea> 
<input type="text" id="password" name="bookauthor" placeholder="Book Author"/ required> 
<input type="file" name="bookfile" id="bookfile" required/> 
<input type="submit" value="Upload book"> 
</form> 
<script> 
    function validate() { 
    var val = document.getElementById('bookfile').value.toLowerCase(); 
    var regex = new RegExp("(.*?)\.(docx|doc|pdf)$"); 
     if(!(regex.test(val))) { 
      document.getElementById('bookfile').value = ''; 
      alert('Please select correct file format'); 
      return false;  
     } 
     return true; 
    } 
</script> 

Answer 2

<form method="POST" action="connection.php" enctype="multipart/form-data" id="myform"> 
<input type="text" id="name" name="bookname" placeholder="Book Name" required/> 
<textarea cols="25" rows="4" name="bookdesc" placeholder="Book Description" required></textarea> 
<input type="text" id="password" name="bookauthor" placeholder="Book Author"/ required> 
<input type="file" name="bookfile" id="bookfile" required/> 
</form> 
    <script> 
     var isValid = false; 
     $(document).ready(function() { 
     $('input[type=file]').change(function() { 
     var val = $(this).val().toLowerCase(); 
     var regex = new RegExp("(.*?)\.(docx|doc|pdf)$"); 
     isValid = !!(regex.test(val)); 
     if(!isValid) { 
     $(this).val(''); 
     alert('Please select correct file format'); 
     } }); }); 
     $("#myform").submit(function(e) { 
      if (!isValid) { 
       e.preventDefault(); 
      } 
     }); 
    </script> 

私はあなたのformにidを追加しました。このidをセレクタとして使用して、formのsubmitハンドラを作成しました。このハンドラはisValidがfalseであるかどうかを確認し、そうであればを呼び出し、formの送信を防ぎます。 isValidがtrueの場合、e.preventDefault()は呼び出されないため、formが送信されます。 isValidはfalseで初期化され、input[type=file]changeで評価されます。