formulário de login Javascript não se submete quando acessos do usuário digite

Question

Eu estou trabalhando em um login javascript simples para um site, e vêm-se com esta:

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

... que funciona, exceto por uma coisa: bater entrar para enviar o formulário não faz nada. Tenho a sensação de que é porque eu usei "onclick", mas eu não tenho certeza o que usar em seu lugar. Pensamentos?

---

Ok sim, então eu estou bem ciente de como frágil esta é a segurança-wise. Não é por nada secreto particularmente alto, por isso não é um problema enorme, mas se vocês poderiam elaborar sobre suas opiniões com código, eu adoraria ver suas idéias. o código i listado é literalmente tudo o que eu estou trabalhando com neste momento, para que eu possa começar do zero se necessário.

Answer 1

Há vários tópicos a ser discutidos em uma vez aqui. Vamos tentar esclarecer.

1. Sua preocupação imediata:

( Por que não o trabalho botão de entrada ao pressionar ENTER? )

Use o enviar tipo.

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

.. em vez de

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

Seu problema realmente não tem nada a ver com ter usado um atributo onclick. Em vez disso, você não está recebendo o comportamento que você quer porque você usou o tipo de entrada, que simplesmente não se comporta da mesma forma que submeter botões fazer.

Em HTML e XHTML, existem comportamentos padrão para certos elementos. Botões de entrada em formulários são muitas vezes do tipo "enviar". Na maioria dos navegadores, "enviar" botões fogo por padrão quando ENTER é pressionado a partir de um elemento focalizado no mesmo elemento de formulário . O "botão" input type não. Se você gostaria de aproveitar esse comportamento padrão, você pode alterar o seu tipo de entrada para "enviar".

Por exemplo:

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

2. As preocupações de segurança:

@Ady mencionou uma preocupação de segurança. Há toda uma balde de problemas de segurança associados com a realização de um login em javascript . Estas são provavelmente fora do domínio desta questão , especialmente desde que você indicou que você não está particularmente preocupado com isso, eo fato de que o seu método de login foi realmente apenas definir o location.href para uma nova página html (indicando que você provavelmente não têm qualquer mecanismo de segurança real no lugar).

Em vez de drudging que até, aqui estão links para tópicos relacionados no SO, se alguém estiver interessado nessas questões diretamente.

• Existe alguma maneira eu posso fazer um client-side validação do usuário?
• Encrypting Ajax chamadas para autenticação em jQuery

3. Outras questões:

Aqui está um limpeza rápida do seu código, que apenas segue algumas das melhores práticas. Ele não aborda o problema de segurança que as pessoas têm mencionado. Em vez disso, eu estou incluindo-o simplesmente para ilustram alguns hábitos saudáveis ??. Se você tiver perguntas específicas sobre por que eu escrevi algo de certa maneira, não hesite em perguntar. Além disso, navegar na pilha para tópicos relacionados (como a sua pergunta pode já ter sido discutido aqui).

A principal coisa a notar é o remoção do evento atributos (onclick = "", onsubmit = "", ou onkeypress = "") a partir do HTML. Aqueles pertencem em javascript, e é considerado uma das melhores práticas para manter os eventos javascript fora da marcação.

<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

Em vez de , use . Você pode colocar o seu código de validação no seu formulário manipulador onsubmit:

Answer 3

é porque ele não é um submetendo forma, por isso não há evento a ser acionado quando o usuário pressiona entrar. Uma alternativa para o formulário acima enviar opções seria adicionar um ouvinte de evento para o formulário de entrada para detectar se o usuário pressionou entrar.

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

Answer 4

Coloque o script diretamente no seu documento html. Altere o valor onclick com a função que deseja usar. O script no html dirá o formulário para enviar quando os hits do usuário digite ou pressione o botão enviar.

 <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

Talvez você pode tentar o seguinte:

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

Como outros apontaram, há outros problemas com sua solução. Mas isso deve responder a sua pergunta.

Answer 6

Com certeza isso é muito inseguro como todos podem quebrá-la em um segundo ...

- única maneira pseudo-seguro para fazer js-logins são similares:

<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

Meu pensamento = falha de segurança maciça. Qualquer um pode ver o nome de usuário e senha.

Mais relevante para a sua pergunta: -. Você tem dois eventos que acontecem

1. botão cliques do usuário.
2. usuário pressiona Enter.

A inserir submete-chave do formulário, mas não clique no botão.

Ao colocar o seu código no método onsubmit do formulário o código será executado quando o formulário é enviado. Ao alterar o tipo de entrada do botão para enviar, o botão irá enviar o formulário da mesma forma que a tecla da entrada faz.

O seu código será executado para ambos os eventos.