javascript - 使用 JS 对 HTML 表单进行文件类型验证后，如果无效，控件应保留在同一页面上

Question

我有一个 html form，对于文件类型，我只需要 pdf、docx 和 doc 文件。我成功地进行了验证，但是单击“确定”按钮后，如果表单无效，我不想发布该表单。目前，它将转到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>