Форма отправляется, даже если проверка не завершена

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();"> 

Обратите внимание на returnonsubmit на мероприятии. Лучше всего предположить, что вы бы забыли ключевое слово return, что не то же самое, и оно отправляет <form>.

Я также вижу, что вы используете className. Лучше заменить его Element.classList:

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

Или, если вы хотите переключить его, вы можете использовать:

element.classList.toggle(); 

Logic

Логика вы использовали неправильно:

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();">