如何在不重定向到另一個頁面的情況下使用HTML和jQuery進行表單驗證？

Question

我已經編寫了HTML表單和腳本來驗證表單。 問題是，每當我提交表單時，都會重定向到一個告訴我“找不到您的文件”的頁面。

我必須調用腳本的特定方式嗎？ 或以任何方式可以強制其運行而不重定向我？

<form id="bioform" action="/action_page.php">
  <label>Biography</label><br>
  <textarea placeholder="Enter bio here" name="bio" rows="10" cols="50"></textarea><br><br>
  <label>Update Biography Picture</label><br><br>
  <input type="file" name="bioimage"><br><br>
  <button type="submit" onclick="function()">Update</button><br>
</form>

<script>
  $(document).ready(function () {
    $('#bioform').validate({
        rules: {
          bio {
            required: true,
            minlength: 5,
          },
        }
        messages: {
          bio {
            required: 'Please enter a biography.',
            minlength: 'Please enter a valid biography.',
          },
        }
        });
  });
</script>

Answer 1

將enctype =“ multipart / form-data”添加到表單標簽

    <form id="bioform" action="/action_page.php" enctype="multipart/form-data">
     <label>Biography</label><br>
     <textarea placeholder="Enter bio here" name="bio" rows="10" cols="50">
     </textarea><br><br>
     <label>Update Biography Picture</label><br><br>
     <input type="file" name="bioimage"><br><br>
     <button type="submit" onclick="function()">Update</button><br>
    </form>

Answer 2

指定必要的發送地址時，是否使用正斜杠？ 例如：

<form id="bioform" action="/action_page.php">

應替換為：

<form id="bioform" action="action_page.php">

Answer 3

由於您使用的是jQuery，請嘗試使用此方法：

e.preventDefault()

e.preventDefault()方法停止發生元素的默認操作。 例如：阻止提交按鈕提交表單。 阻止鏈接跟隨URL。

另外，由於要處理文件上載，因此需要在<form>標記內添加method屬性，其值為POST以及enctype="multipart/form-data" 。

轉到此小提琴並檢查它是否對您有用 ： https : //jsfiddle.net/z0db4vq0/1/