JavaScript Validation Form not working

Question

ユーザーがユーザー名またはパスワードを入力しないと、Webサイトにログインできないようにフォームを検証しようとしています。何らかの理由で、ユーザー名とパスワードの両方のフィールドを入力してログインをクリックすると、login.htmlページは表示されません。どんな助け？

<script> 
 
    window.onload = function(){ 
 
     function handleinput(){ 
 
      if(document.loginform.username.value == ""){ 
 
       document.getElementById("usernameError").innerHTML = "You must enter a username"; 
 
       return false; 
 
      } 
 
     
 
      if(document.loginform.password.value == ""){ 
 
       document.getElementById("passwordError").innerHTML = "You must enter a password"; 
 
       return false; 
 
      } 
 
     } 
 
     
 
     document.getElementById("loginform").onsubmit = handleinput; 
 
    } 
 
</script>

<form id="loginform" name="loginform" method="post"> 
 
\t \t <div> 
 
\t \t <label hidden> Username</label> 
 
\t \t \t <input type= "text" class="text" placeholder="Username" title="Username" name="username"> 
 
\t \t \t <span id="usernameError"></span> 
 
\t \t \t 
 
\t \t <label hidden> Password </label> 
 
\t \t \t <input type= "password" class="text" placeholder="Password" title="Password" name="password"> 
 
\t \t \t <span id="passwordError"></span> 
 
\t \t \t <a href="" class="anchor-float">Forgot password?</a> 
 
\t \t \t 
 
\t \t </div> 
 
\t \t \t <div class="button-container"> 
 
\t \t \t \t <a href="login.html" target="_blank"> <input type= "submit" value="Login" class="login"/> 
 
\t \t \t \t </a> 
 
\t \t \t \t <input type= "button" value="Sign up" class="login signup"/> 
 
\t \t \t </div> \t \t \t 
 
     </form>

Answer 1

あなたが適切にフォーム送信後にリダイレクトする方法ではありませんlogin.htmlを指したa要素、に包まれた送信ボタンを持っていました。これにより、event bubbling and/or capturingのためにイベントを処理する際に問題が発生します。実際に

フォームはあなたのformタグ内にそのデータを送信する場所、あなたが指定していない：

<form id="loginform" name="loginform" method="post"> 

フォームが（現在のページにそのデータを送信することを意味している（デフォルト）同じページがリロードされますが、この更新されたロードではフォームデータにアクセスできます）。

フォームが目的地へのパスを指定するaction属性を持っている必要があり、別のページ/リソースにデータを送信するために：

<form id="loginform" name="loginform" method="post" action="login.html"> 

は、フォームを送信の詳細についてはthisを参照してください。

Stack Overflowのコードスニペット環境ではフォームの送信はできませんが、動作するコードの最新バージョンがあるthis Fiddleを確認してください。