我有一个 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>
最佳答案
使用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>
关于javascript - 使用 JS 对 HTML 表单进行文件类型验证后,如果无效,控件应保留在同一页面上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44993812/