Le formulaire de connexion Javascript n'est pas envoyé lorsque l'utilisateur clique sur Entrée

Question

Je travaille sur une simple connexion javascript pour un site et je viens avec ceci:

<form id="loginwindow">
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
  <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
  <input type="button" value="Check In" name="Submit" onclick=javascript:validate(text2.value,"username",text1.value,"password") />
</p>

</form>
<script language = "javascript">

function validate(text1,text2,text3,text4)
{
 if (text1==text2 && text3==text4)
 load('album.html');
 else 
 {
  load('failure.html');
 }
}
function load(url)
{
 location.href=url;
}
</script>

... qui fonctionne sauf pour une chose: appuyer sur Entrée pour soumettre le formulaire ne fait rien. J'ai l'impression que c'est parce que j'ai utilisé & "Onclick &"; mais je ne sais pas quoi utiliser à la place. Des pensées?

D'accord, alors je suis bien conscient de la fragilité de la sécurité. Ce n'est pas pour quelque chose de particulièrement top secret, donc ce n'est pas un problème énorme, mais si vous pouviez développer vos pensées avec du code, j'aimerais voir vos idées. le code que je viens de lister est littéralement tout ce que je travaille à ce stade, je peux donc recommencer à zéro si besoin est.

Answer 1

Plusieurs sujets sont discutés en même temps ici. Essayons de clarifier.

1. Votre préoccupation immédiate:

( Pourquoi le bouton d'entrée ne fonctionne-t-il pas lorsque vous appuyez sur ENTER? )

Utilisez le type de bouton soumettre .

<input type="submit".../> 

.. au lieu de

<input type="button".../>

Votre problème n’a vraiment rien à voir avec l’utilisation d’un attribut onclick . Au lieu de cela, vous n'obtenez pas le comportement souhaité, car vous avez utilisé le type d'entrée bouton , qui ne se comporte tout simplement pas de la même manière que les boutons d'envoi.

En HTML et XHTML, il existe des comportements par défaut pour certains éléments. Les boutons de saisie des formulaires sont souvent de type & Quot; submit & Quot ;. Dans la plupart des navigateurs, & Quot; submit & Quot; Les boutons sont activés par défaut lorsque vous appuyez sur la touche ENTREE à partir d'un élément focalisé dans le même élément de formulaire . Le & Quot; bouton & Quot; le type d'entrée ne le fait pas. Si vous souhaitez tirer parti de ce comportement par défaut, vous pouvez modifier votre type d'entrée en & Quot; submit & Quot..

.

Par exemple:

<form action="/post.php" method="post">
    <!-- 
    ...
    -->
    <input type="submit" value="go"/>
</form>

2. Problèmes de sécurité:

@Ady a mentionné un problème de sécurité. La création d'un login en javascript pose de nombreux problèmes de sécurité. Celles-ci ne relèvent probablement pas du domaine de cette question , d'autant plus que vous avez indiqué ne pas trop vous inquiéter et que votre méthode de connexion ne faisait que définir l'emplacement.href à une nouvelle page HTML (indiquant que vous n'avez probablement aucun mécanisme de sécurité réel en place).

Au lieu de vous compliquer la tâche, voici des liens vers des sujets connexes sur SO, si vous êtes intéressé par ces questions directement.

• Y a-t-il puis-je faire une validation utilisateur côté client?
• Le chiffrement d'Ajax appelle l'authentification dans jQuery

3. Autres problèmes:

Voici un nettoyage rapide de votre code, qui respecte simplement certaines des meilleures pratiques. Cela ne règle pas le problème de sécurité mentionné par les gens. Au lieu de cela, je l'inclue simplement pour illustrer certaines habitudes saines . Si vous avez des questions spécifiques sur les raisons pour lesquelles j'ai écrit quelque chose d'une certaine manière, n'hésitez pas à demander. En outre, parcourez la pile de documents correspondants (car votre question a peut-être déjà été abordée ici).

La principale chose à noter est la suppression des attributs d'événement (onclick = & "; &"; onsubmit = & "; &"; ou onkeypress = " ") du HTML. Ceux-ci appartiennent à javascript, et il est considéré comme une bonne pratique de garder les événements javascript en dehors du balisage.

<form action="#" method="post" id="loginwindow">
    <h3>Login to view!</h3>
    <label>User ID: <input type="text" id="userid"></label>
    <label>Password: <input type="password" id="pass"></label>
    <input type="submit" value="Check In" />
</form>

<script type="text/javascript">
window.onload = function () {
    var loginForm = document.getElementById('loginwindow');
    if ( loginwindow ) {
        loginwindow.onsubmit = function () {

            var userid = document.getElementById('userid');
            var pass = document.getElementById('pass');

            // Make sure javascript found the nodes:
            if (!userid || !pass ) {
                return false;
            }

            // Actually check values, however you'd like this to be done:
            if (pass.value !== "secret")  {
                location.href = 'failure.html';
            }

            location.href = 'album.html';
            return false;
        };
    }
};
</script>

Answer 2

Au lieu de < input type = & "bouton &"; > ;, utilisez < input type = & "; soumettez &"; > ;. Vous pouvez mettre votre code de validation dans votre gestionnaire de formulaire onsubmit:

< form id = " loginwindow " onsubmit = " valider (...) " >

Answer 3

c'est parce que ce n'est pas un formulaire soumis, il n'y a donc aucun événement à déclencher lorsque l'utilisateur appuie sur Entrée. Une alternative aux options de soumission de formulaire ci-dessus consiste à ajouter un écouteur d'événement pour que le formulaire de saisie détecte si l'utilisateur a appuyé sur Entrée.

<input type="password" name="text1" onkeypress="detectKey(event)">

Answer 4

Placez le script directement dans votre document HTML. Changez la valeur onclick avec la fonction que vous voulez utiliser. Le script au format html indiquera au formulaire à soumettre lorsque l’utilisateur clique sur Entrée ou appuie sur le bouton d'envoi.

 <form id="Form-v2" action="#">

<input type="text" name="search_field"  placeholder="Enter a movie" value="" 
id="search_field" title="Enter a movie here" class="blink search-field"  />
<input type="submit" onclick="" value="GO!" class="search-button" />        
 </form>

    <script>
    //submit the form
    $( "#Form-v2" ).submit(function( event ) {
      event.preventDefault();
    });
         </script>

Answer 5

Peut-être que vous pouvez essayer ceci:

<form id="loginwindow" onsubmit='validate(text2.value,"username",text1.value,"password")'>
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
   <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
   <input type="submit" value="Check In"/>
</p>

</form>

Comme d'autres l'ont souligné, votre solution pose d'autres problèmes. Mais cela devrait répondre à votre question.

Answer 6

C’est sûrement trop peu sûr car tout le monde peut le craquer en une seconde ...

- seuls les moyens pseudo-sécurisés de se connecter en js sont les suivants:

<form action="http://www.mySite.com/" method="post" onsubmit="this.action+=this.theName.value+this.thePassword.value;">
  Name: <input type="text" name="theName"><br>
  Password: <input type="password" name="thePassword"><br>
  <input type="submit" value="Login now">
</form>

Answer 7

Ma pensée = Trou de sécurité énorme. Tout le monde peut voir le nom d'utilisateur et le mot de passe.

Plus pertinent pour votre question: - Deux événements se produisent.

1. L'utilisateur clique sur le bouton.
2. L'utilisateur appuie sur Entrée.

La touche Entrée soumet le formulaire, mais ne cliquez pas sur le bouton.

En plaçant votre code dans la méthode onsubmit du formulaire, le code sera exécuté lors de l'envoi du formulaire. En modifiant le type de saisie du bouton à soumettre, le bouton soumettra le formulaire de la même manière que le bouton Entrée.

Votre code sera ensuite exécuté pour les deux événements.