別のページにリダイレクトせずに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

タグ

<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

を形成するためのenctype = "multipart/form-data" を追加します。それが必要に送信する場所を指定するときはスラッシュですか？例えば：

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

を置き換えてください：

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

Answer 3

あなたはjQueryのを使用しているので、これを使用してみてください：

e.preventDefault()

e.preventDefault()方法はデフォルトを停止します 要素の動作が発生しています。例： の送信ボタンがフォームを送信しないようにします。リンクがURLに従わないようにする。

はまた、あなたは、ファイルのアップロードを扱っているので、値POSTで<form>タグ内method属性を追加してもenctype="multipart/form-data"する必要があります。

このフィドルに移動し、それはあなたのために働くかどうかを確認：https://jsfiddle.net/z0db4vq0/1/