Javascript login form non invia quando si preme Invio

Question

Sto lavorando su un semplice javascript login di un sito, e sono arrivato a questo:

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

...che funziona, tranne per una cosa:premendo invio per inviare il modulo non fa nulla.Ho la sensazione che la causa ho usato "onclick" ma io non sono sicuro di cosa usare al posto.Pensieri?

---

Va bene sì, quindi sono ben consapevole di quanto sia fragile questo è la sicurezza.Non è per nulla di particolarmente top secret, quindi non è un problema enorme, ma se voi ragazzi non poteva elaborare i vostri pensieri con il codice, mi piacerebbe vedere le vostre idee.il codice che ho elencato è letteralmente tutti sto lavorando con, a questo punto, in modo da poter iniziare da zero se necessario.

Answer 1

Ci sono diversi argomenti in discussione in una volta qui.Cerchiamo di chiarire.

1.La Tua Preoccupazione Immediata:

(Perché non il pulsante input di lavoro quando si preme INVIO?)

Utilizzare il invia tipo di pulsante.

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

..invece di

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

Il problema in realtà non hanno nulla a che fare con l'aver utilizzato un onclick attributo.Invece, non stai ricevendo il comportamento che si vuole, perché hai usato la pulsante tipo di ingresso, che semplicemente non si comportano allo stesso modo in cui presentare pulsanti.

In HTML e XHTML, ci sono comportamenti predefiniti per alcuni elementi.Tasti di ingresso su forme sono spesso di tipo "submit".Nella maggior parte dei browser "invia" pulsanti fuoco per impostazione predefinita quando si preme INVIO da un particolare elemento nel modulo stesso elemento.Il "pulsante" input type non.Se vuoi approfittare di questo comportamento di default, è possibile modificare il tipo di ingresso "submit".

Per esempio:

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

2.Le preoccupazioni per la sicurezza:

@Ady parlato di un problema di sicurezza.Ci sono un intero secchio di problemi di sicurezza associati con il fare una login in javascript.Questi sono probabilmente al di fuori del dominio di questa domanda, soprattutto visto che tu hai indicato non sono particolarmente preoccupato, e il fatto che il metodo di login in realtà era solo il percorso.href per una nuova pagina html (che indica che probabilmente non hanno alcun reale meccanismo di sicurezza in luogo).

Invece di drudging che, qui sono link ad argomenti correlati COSÌ, se qualcuno è interessato a queste domande direttamente.

• C'è qualche modo posso fare un utente di validazione client-side?
• Crittografare le chiamate Ajax per l'autenticazione in jQuery

3.Altri Problemi:

Ecco un una rapida pulizia il codice che segue solo alcune best practice.Non risolve il problema di sicurezza che le persone hanno menzionato.Invece, sono compresi semplicemente a illustrare alcune sane abitudini.Se avete domande specifiche circa il motivo per cui ho scritto qualcosa in un certo modo, non esitate a chiedere.Inoltre, sfoglia stack per argomenti correlati (come la tua domanda potrebbe essere già stato discusso qui).

La cosa principale da notare è il la rimozione dell'evento attributi (onclick="", onsubmit="" o onkeypress="") dall'HTML.Coloro che appartengono in javascript, ed è considerato una best practice per mantenere il javascript eventi al di fuori del markup.

<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

Invece <input type="button">, utilizzare <input type="submit">.Si può mettere il codice di validazione di un form onsubmit del gestore:

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

Answer 3

è perché non è una forma di presentazione, quindi non c'è nessun caso essere attivato quando l'utente preme invio.In alternativa a quanto sopra l'invio del form, opzioni potrebbe essere quella di aggiungere un listener di eventi per il modulo di ingresso per rilevare se l'utente preme invio.

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

Answer 4

Inserire lo script direttamente nel documento html.Modificare il onclick valore con la funzione che si desidera utilizzare.Lo script nel codice html dirà il modulo per presentare quando l'utente preme invio o premere il pulsante di invio.

 <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

Forse si può provare questo:

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

Come altri hanno sottolineato, ci sono altri problemi con la tua soluzione.Ma questo dovrebbe rispondere alla tua domanda.

Answer 6

Sicuramente questo è troppo insicuro come tutti possono crepa in un secondo ...

-- solo pseudo-modo sicuro per fare js-gli accessi sono simili:

<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

Il mio Pensiero = Enorme buco di sicurezza.Chiunque può visualizzare il nome utente e la password.

Più pertinente alla tua domanda:- Hai due eventi che accadono.

1. Utente fa clic su un pulsante.
2. Utente preme invio.

Il tasto invio invia il modulo, ma non fare clic sul pulsante.

Inserendo il codice nell'onsubmit metodo del form il codice verrà eseguito quando il modulo viene inviato.Cambiando il tipo di ingresso del pulsante per inviare il pulsante submit della form, nello stesso modo che il pulsante di invio fa.

Il codice verrà eseguito per entrambi gli eventi.