Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] window.location.href não funciona

Estou tentando criar um site de login utilizando apenas html, css e javascript. Mas assim que tento redirecionar o usuário para outra página, não está dando certo!

//Código HTML

Informe seu usuário e sua senha para acessar

<form id="login">
  <input type="text" id="usuario" placeholder="Usuário" required />
  <i class="fas fa-user iUser iUser"></i>
  <input type="password" id="senha" placeholder="Senha" required />
  <i class="fas fa-lock iPassword"></i>
  <div class="divCheck">
    <span><a class='divCheck' href="blablanla">Não recebeu seu login?</a></span>
  </div>
  <button type="submit" onclick="validarLogin()"><strong>Entrar</strong></button>
</form>

//Cógido JavaScript

function validarLogin() {

var usuario = document.getElementById('usuario').value; var senha = document.getElementById('senha').value;

if (usuario === 'teste123' && senha === '123') { window.location.href="https://www.youtube.com"; } else { alert('usuário e senha incorretos.'); } }

2 respostas
solução!

Quando um formulário é enviado, por padrão, a página é atualizada. Para evitar esse comportamento e executar uma função específica, é essencial interromper essa ação padrão. Isso pode ser feito ao modificar a função e utilizar o método preventDefault() para impedir o comportamento padrão de envio do formulário. Além disso, é recomendável usar o evento onsubmit em formulários para acionar a função desejada, em vez do evento onclick. Essas abordagens garantem o controle do comportamento do envio do formulário e permitem a execução de funções personalizadas sem a atualização da página.

  1. https://www.w3schools.com/jsref/event_preventdefault.asp
  2. https://www.w3schools.com/jsref/event_onsubmit.asp

Seu codigo ficaria algo assim:

<form id="login" onsubmit="validarLogin(event)">
  <input type="text" id="usuario" placeholder="Usuário" required />
  <i class="fas fa-user iUser iUser"></i>
  <input type="password" id="senha" placeholder="Senha" required />
  <i class="fas fa-lock iPassword"></i>
  <div class="divCheck">
    <span><a class='divCheck' href="blablanla">Não recebeu seu login?</a></span>
  </div>
  <button type="submit"><strong>Entrar</strong></button>
</form>

<script>
  function validarLogin(event) {
    event.preventDefault(); // Corrigido: Adicionado parênteses para chamar o método preventDefault()
    var usuario = document.getElementById('usuario').value;
    var senha = document.getElementById('senha').value;

    if (usuario === 'teste123' && senha === '123') {
      window.location.href = "https://www.youtube.com";
    } else {
      alert('Usuário e senha incorretos.');
    }
  }
</script>

Funcionou!!! Muito Obrigadooo!!!