you - Il modulo di login Javascript non viene inviato quando l'utente fa clic su Invio




javascript tutorial (5)

Sto lavorando su un semplice login javascript per un sito, e ho inventato 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 una cosa: premere invio per inviare il modulo non fa nulla. Ho la sensazione che sia perché ho usato "onclick", ma non sono sicuro di cosa invece usare. Pensieri?

Okay sì, sono ben consapevole di quanto sia fragile questo è il livello di sicurezza. Non è per niente particolarmente top secret, quindi non è un grosso problema, ma se voi ragazzi poteste elaborare i vostri pensieri con il codice, mi piacerebbe vedere le vostre idee. il codice che ho elencato è letteralmente tutto ciò che sto lavorando a questo punto, quindi posso ricominciare da capo se necessario.


Metti lo script direttamente nel tuo documento html. Modificare il valore onclick con la funzione che si desidera utilizzare. Lo script nell'html indicherà il modulo da inviare 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>

Ci sono diversi argomenti in discussione qui. Proviamo a chiarire.

1. La tua preoccupazione immediata:

( Perché il pulsante di input non funzionerà quando si preme ENTER ) ?

Usa il tipo di pulsante di invio .

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

..invece di

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

Il tuo problema in realtà non ha nulla a che fare con l'utilizzo di un attributo onclick . Invece, non ottieni il comportamento desiderato perché hai utilizzato il tipo di input del pulsante , che semplicemente non si comporta allo stesso modo dei pulsanti di invio.

In HTML e XHTML, ci sono comportamenti di default per alcuni elementi. I pulsanti di input sui moduli sono spesso di tipo "submit". Nella maggior parte dei browser, i pulsanti "invia" vengono attivati per impostazione predefinita quando si preme INVIO da un elemento focalizzato nello stesso elemento del modulo . Il tipo di input "button" non lo fa. Se desideri approfittare di questo comportamento predefinito, puoi modificare il tipo di input in "invio".

Per esempio:

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

2. Problemi di sicurezza:

@Ady ha menzionato un problema di sicurezza. Ci sono un sacco di problemi di sicurezza associati con il login in javascript . Questi sono probabilmente al di fuori del dominio di questa domanda , specialmente dal momento che hai indicato che non sei particolarmente preoccupato per questo, e il fatto che il tuo metodo di accesso in realtà stava semplicemente impostando location.href su una nuova pagina html (indicando che probabilmente non hai alcun meccanismo di sicurezza reale in atto).

Invece di ritenerlo, ecco i link ad argomenti correlati su SO, se qualcuno è interessato direttamente a queste domande.

3. Altri problemi:

Ecco una rapida pulizia del tuo codice, che segue solo alcune best practice. Non affronta il problema di sicurezza che le persone hanno menzionato. Invece, lo includo semplicemente per illustrare alcune abitudini salutari . Se hai domande specifiche sul perché ho scritto qualcosa in un certo modo, sentiti libero di chiedere. Inoltre, sfoglia la pila per argomenti correlati (poiché la tua domanda potrebbe essere già stata discussa qui).

La cosa principale da notare è la rimozione degli attributi dell'evento (onclick = "", onsubmit = "" o onkeypress = "") dall'HTML. Quelli appartengono in javascript, ed è considerato una buona pratica per mantenere gli eventi javascript fuori dal 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>

Forse puoi 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.


Invece di <input type = "button">, usa <input type = "submit">. Puoi inserire il tuo codice di convalida nel modulo sul gestore di invio:

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


Sicuramente questo è troppo poco sicuro in quanto tutti possono crearlo in un secondo ...

- Solo il modo pseudo-sicuro di fare js-login è il seguente:

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






html-input