Форма проверки JavaScript не работает

Question

Я пытаюсь проверить мою форму, чтобы, если пользователь не вводит имя пользователя или пароль, ему не разрешено заходить на сайт. По какой-то причине, когда я ввожу как поля имени пользователя, так и пароль, и нажмите «Войти», страница 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

Вы были ваша кнопка отправить завернутые в a элемент, который указывал на login.html, который не является, как правильно перенаправить после отправки формы. Это также вызовет проблемы с обработкой событий из-за 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 подробности о представлении форм.

Сценарий фрагмента кода стека не допускает отправки форм, но проверьте this Fiddle, который имеет обновленную версию вашего кода, который работает.