如何在不重定向到另一个页面的情况下使用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/