検証に失敗してもフォームが送信されます

Question

フォームを正常に送信できるように、ユーザ名とパスワードをそれぞれadmin & adminにします。しかし、ユーザー名とパスワードが一致しない場合でもフォームは送信されますadmin & admin。

function validateOnSubmit() { 

    console.log("Called!"); 
    var isValid = true; 

    document.getElementById("alert").className = ""; 
    if (document.getElementById("login-password").value.length <= 4) { 
     isValid = false; 
     document.getElementById("alert").className = "doWiggle"; 
     setTimeout(function(){ 
      document.getElementById("alert").className = document.getElementById("alert").className.replace('doWiggle', ''); 
     }, 300); 
    }else 
    { 
     if(document.getElementById("login-password").value != "admin" && document.getElementById("username").value != "admin") { 
      alert("Wrong Password!"); 
      isValid = false; 
     } 
    } 
    console.log(isValid); 
    return isValid; 
} 

HTML

<div class="container"> 
    <form action="home.html" id="login-form" method="post" onsubmit="return validateOnSubmit()"> 
    <p class="form-header">Sign In</p> 
     <span>Username</span> 
     <br/> 
     <input type="text" name="username" id="username" autocomplete="off" required/> 

     <br/> 
     <br/> 

     <span>Password</span> 
     <br/> 
     <input type="password" name="login-password" id="login-password" onkeyup="return validate()" required/> 
     <p id="alert">Password should more than 4 characters!</p> 
     <br/> 
     <br/> 

     <input type="checkbox" name="rememberMe" class="rememberMe" id="rememberMe"/> 
     <label for="rememberMe">Remember Me</label> 

     <br/> 
     <br/> 

     <input type="submit" id="submit" value="Sign In"/> 
     <br> 
     <br> 
     <div id="options"> 
      <a href="register.html">Not registered ?</a> 
     </div> 
     <input type="hidden" name="operation" value="login"> 
    </form> 
    </div> 
    <script type="text/javascript" src="js/validate.js"></script> 
</body> 

Answer 1

あなたがvalidateOnSubmit()を呼び出す必要な方法は、この方法です：

<form onsubmit="return validateOnSubmit();"> 

onsubmitイベントにreturnに注意してください。あなたはreturnキーワードを忘れてしまいましたが、それは同じではなく、<form>を提出するでしょう。

また、あなたはclassNameを使用しています。 Element.classListと交換した方がよい：

element.classList.add(); // Similar to adding class. 
element.classList.remove(); // Similar to removing class. 

それとも、それトグルしたい場合は、あなたが使用することができます。

element.classList.toggle(); 

ロジック

あなたが使用しているロジックが間違っている：

if (document.getElementById("login-password").value != "admin" && document.getElementById("username").value != "admin") { 

上記のロジックは、仕事。以下を使用してください：

if (document.getElementById("login-password").value != "admin" || document.getElementById("username").value != "admin") { 

ここには||の演算子が必要です。現在、usernameまたはpasswordのいずれかが正しい場合は、フォームが送信されますが、これは間違っています。

Answer 2

jsエラーがないことを確認する必要があります。あなたのjs関数は、それが起こる場合無視することができます。

上記のように、validateOnSubmit()を何とか呼び出す必要があります。プロッパの方法は：

<form onsubmit="return validateOnSubmit();">