Javascript Login-Formular einreichen nicht, wenn Benutzer Treffer eingeben

Question

Ich bin auf einem einfachen Javascript Login für eine Website zu arbeiten, und haben mit dieser kommen:

<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>

..., die bis auf eine Sache funktioniert: hitting geben Sie das Formular abzuschicken tut nichts. Ich habe das Gefühl, es ist, weil ich verwendet habe „Onclick“ aber ich bin nicht sicher, was stattdessen zu verwenden. Gedanken?

---

Okay, ja, so bin ich auch bewusst, wie dünn das ist Sicherheit-weise. Es ist nicht für irgendetwas besonders streng geheim, so ist es kein großes Problem, aber wenn euch auf Ihre Meinung Code erarbeiten könnte, würde ich gerne Ihre Ideen sehen. i der Code aufgeführt ist buchstäblich alles, was ich an dieser Stelle gerade arbeite, also kann ich von vorne anfangen, wenn es sein muss.

Answer 1

Es gibt mehrere Themen auf einmal hier diskutiert. Lassen Sie uns versuchen zu klären.

1. Ihr unmittelbares Anliegen:

( Warum wird nicht die Eingabe-Taste arbeiten, wenn ENTER gedrückt wird? )

Mit dem Senden Typ.

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

.. anstelle von

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

Ihr Problem wirklich nichts mit dem zu tun hat, ein verwendet hat Onclick Attribut. Stattdessen sind Sie nicht auf das Verhalten immer Sie wollen, weil Sie die Eingabetyp verwendet habe, die einfach nicht die gleiche Art und Weise verhält, die Senden-Schaltflächen tun.

In HTML und XHTML gibt es Standardverhalten für bestimmte Elemente. Eingabetaste auf Formen sind oft vom Typ „Eintragen“. In den meisten Browsern "Eintragen" Tasten Feuer standardmäßig , wenn sie von einem fokussierten Element in der gleichen Form Element ENTER gedrückt wird. Der „Knopf“ input type nicht. Wenn Sie die Vorteile dieses Standardverhalten zu übernehmen möchten, können Sie Ihre Eingabetyp ändern „Eintragen“.

Zum Beispiel:

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

2. Sicherheitsprobleme:

@Ady erwähnt ein Sicherheitsproblem. Es gibt einen ganzen Eimer Sicherheitsbedenken im Zusammenhang mit der Ausübung eine Login in Javascript . Dies sind wahrscheinlich außerhalb der Domäne dieser Frage , vor allem, da Sie angegeben haben, dass Sie es nicht besonders besorgt sind, und die Tatsache, dass Ihr Login-Verfahren einstellt eigentlich nur die location.href zu eine neue hTML-Seite (was anzeigt, dass Sie wahrscheinlich an Ort und Stell keinen wirklichen Sicherheitsmechanismus haben).

Statt dass der drudging up, sind hier Links zu verwandten Themen: auf SO, wenn jemand in diesen Fragen interessiert ist direkt.

• Gibt es eine Möglichkeit, ich kann eine Benutzervalidierung clientseitige tun?
• Encrypting Ajax-Aufrufe für die Authentifizierung in jQuery

3. Andere Probleme:

Hier ist ein schnelle Reinigung Ihres Codes, die nur einige Best Practices folgt. Es wird nicht die Sicherheitsbedenken beseitigen, dass die Leute erwähnt haben. Stattdessen ich bin auch es einfach einige gesunde Gewohnheiten zeigen . Wenn Sie spezielle Fragen haben, warum ich etwas auf eine bestimmte Weise geschrieben haben, fühlen Sie sich frei zu fragen. Auch Sie sehen den Stapel zu verwandten Themen: (wie Ihre Frage bereits haben hier besprochen).

Die Hauptsache ist zu bemerken, ist das Entfernen der Event-Attribute (Onclick = "", onsubmit = "" oder onkeypress = "") aus dem HTML. Diejenigen, gehören in Javascript, und es ist eine gute Praxis, die Javascript-Ereignisse aus dem Markup zu halten.

<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

Anstelle von mit . Sie können Ihren Validierungscode in Ihrem Formular onsubmit Handler setzen:

Answer 3

es ist, weil es nicht ein Formular abgeschickt ist, so gibt es kein Ereignis ausgelöst werden, wenn der Benutzer die Eingabetaste drückt. Eine Alternative zu dem obigen Formular Optionen einen Ereignis-Listener hinzuzufügen, wären für die Eingabemaske zu erkennen, wenn der Benutzer gedrückt eingeben.

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

Answer 4

Setzen Sie das Skript direkt in Ihrem HTML-Dokument. Ändern Sie den Wert Onclick mit der Funktion, die Sie verwenden möchten. Das Skript in den HTML-Code wird das Formular sagen einreichen, wenn der Benutzer ENTER oder drücken Sie die Submit-Button.

 <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

Vielleicht können Sie versuchen, diese:

<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>

Wie andere haben darauf hingewiesen, gibt es andere Probleme mit Ihrer Lösung. Aber dies sollte Ihre Frage beantworten.

Answer 6

Sicher ist dies auch unsicheres wie jeder es in einem zweiten knacken ...

- nur pseudo-sichere Art und Weise js-Logins sind dergleichen zu tun:

<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

Meine Gedanken = Massives Sicherheitsloch. Jeder kann den Benutzernamen und das Kennwort anzuzeigen.

Mehr zu Ihrer Frage: -. Sie haben zwei Ereignisse geschehen

1. Der Benutzer klickt Taste.
2. Drücken der Eingabetaste.

Der Schlüssel vorträgt gibt die Form, aber nicht auf den Button nicht anklicken.

Ihr Code in der onsubmit-Methode des Formulars den Code Durch die Platzierung ausgeführt wird, wenn das Formular abgeschickt wird. Durch die Änderung des Eingabetypen des Knopfes einreichen, wird die Taste, um die Form in der gleichen Art und Weise vor, dass die Enter-Taste nicht.

Ihr Code wird dann für beide Veranstaltungen laufen.