JavaScript Formulaire de validation ne fonctionne pas

Question

J'essaie de valider mon formulaire de sorte que si l'utilisateur ne saisit pas le nom d'utilisateur ou le mot de passe, il n'est pas autorisé à se connecter au site Web. Pour une raison quelconque, lorsque je saisis à la fois les champs Nom d'utilisateur et Mot de passe, et que je clique sur Connexion, la page login.html n'apparaît pas. De l'aide?

<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

Vous avez eu votre bouton d'envoi enveloppé dans un élément a qui pointait à login.html, qui n'est pas comment rediriger correctement après une soumission de formulaire. Cela entraînera également des problèmes avec la gestion des événements en raison de event bubbling and/or capturing.

En réalité, vous n'avez pas spécifié où le formulaire doit envoyer ses données dans votre balise form:

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

qui (par défaut) signifie que la forme envoie ses données à la page en cours (provoquer le rechargement de la même page, mais avoir accès aux données de formulaire dans cette charge mise à jour).

Pour envoyer les données à une page/ressource différente, la forme doit avoir un attribut action qui spécifie le chemin vers la destination:

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

Voir this pour plus de détails sur les formulaires qui présentent.

L'environnement d'extraits de code de Stack Overflow ne permet pas la soumission de formulaires, mais consultez this Fiddle qui a une version mise à jour de votre code qui fonctionne.