0

Eu tenho um código e nele eu tenho um JavaScript (que foi passado pelo professor); esse código é um formulário e preciso validar as senhas informadas.

Porém, eu estou colocando senhas iguais e também senhas diferentes e não me vêm nenhuma informação - se for senhas iguais, cadastrado feito; se for diferente, senhas diferentes - alguém poderia me ajudar?

function validarSenha() {
  var senha1 = document.getElementById("senha");
  var senha2 = document.getElementById("senhaTmp");
  var s1 = senha1.value;
  var s2 = senha2.value;
  if (s1 == s2) {
    alert("Dados Cadastrados");
    return true;
  } else {
    alert("Senhas não batem. Verifique o valor digitado.");
    return false;
  }
}
<fieldset>
  <legend>Formulário:</legend>
  <form id="cad">
    <label for="nome">Digite seu nome:</label><br>
    <input type="text" name="nome" pattern="[A-Z][a-z]+[ ][A-Z][a-z]+"><br>
    <label for="idade">Idade:</label><br>
    <input type="date" name="idade"><br>
    <label for="cpf">CPF:</label><br>
    <input type="text" name="cpf" pattern="[0-9]{3}[.][0-9]{3}[.][0-9]{3}[-][0-9]{2}"><br>
    <label for="cep">CEP:</label><br>
    <input type="text" name="cep" pattern="[0-9]{2}[.][0-9]{3}[-][0-9]{3}"><br>
    <label for="email">Digite seu email:</label></br>
    <input type="email" name="email" pattern="[^. ][A-Za-z0-9.]*[^. ][@][A-Za-z0-9.]*[^. ]" /><br>
    <label for="senha">Digite sua senha:</label><br>
    <input type="password" name="senha" pattern="[^. ][A-Za-z0-9.]*[^. ][@][A-Za-z0-9.]*[^. ]" /><br>
    <label for="senhaTmp">Confirme sua senha:</label><br>
    <input type="password" name="senhaTmp" pattern="[^. ][A-Za-z0-9.]*[^. ][@][A-Za-z0-9.]*[^. ]" /><br>
    <input type="reset" name="limpar" /><br>
    <input type="submit" onclick="return validarSenha()" value="Cadastrar" /><br>
  </form>
</fieldset>

3
  • Você está usando getElementById mas nenhum elemento tem senha ou senhaTmp definidos como seu id, está como name. 19/06/2018 às 13:08
  • Realmente @DiegoRafaelSouza obrigado estava errada nessa parte. 19/06/2018 às 13:14
  • Suas expressões regulares para senhas e email são as mesmas?
    – jean
    19/06/2018 às 14:04

1 Resposta 1

1

O principal problema que faz seu código não funcionar é por utilizar getElementById para elementos que não possuem o atributo id definido. Ou seja, para manter o código assim, basta definir os atributos nos campos que necessita:

function validarSenha() {
  var senha1 = document.getElementById("senha");
  var senha2 = document.getElementById("senhaTmp");
  var s1 = senha1.value;
  var s2 = senha2.value;
  if (s1 == s2) {
    alert("Dados Cadastrados");
    return true;
  } else {
    alert("Senhas não batem. Verifique o valor digitado.");
    return false;
  }
}
<fieldset>
  <legend>Formulário:</legend>
  <form id="cad">
    <div>
      <label for="senha">Digite sua senha:</label>
      <input type="password" name="senha" id="senha" pattern="[^. ][A-Za-z0-9.]*[^. ][@][A-Za-z0-9.]*[^. ]" />
    </div>
    <div>
      <label for="senhaTmp">Confirme sua senha:</label>
      <input type="password" name="senhaTmp" id="senhaTmp" pattern="[^. ][A-Za-z0-9.]*[^. ][@][A-Za-z0-9.]*[^. ]" />
    </div>
    <input type="reset" name="limpar" />
    <input type="submit" onclick="return validarSenha()" value="Cadastrar" />
  </form>
</fieldset>

Outro detalhe, que não influencia o funcionamento, é que o elemento <br> não deve ser utilizado para definir o leiaute. Veja que no exemplo acima eu utilizei o elemento <div> para separar os campos. O tamanho dos espaços, alinhamentos, etc, isto é, detalhes do leiaute, você definirá no CSS. Veja mais em:

<br> está obsoleto?

Além de ser interessante você adiantar a mensagem de erro. Quanto mais cedo você indicar ao usuário que algo está errado, antes ele corrigirá. Ao invés de validar a senha apenas na submissão do formulário, faça isso assim que ele confirmar a senha. Um exemplo seria utilizar o evento blur:

function validarSenha() {
  var senha1 = document.getElementById("senha");
  var senha2 = document.getElementById("senhaTmp");
  var s1 = senha1.value;
  var s2 = senha2.value;
  if (s1 == s2) {
    alert("Dados Cadastrados");
    return true;
  } else {
    alert("Senhas não batem. Verifique o valor digitado.");
    return false;
  }
}
<fieldset>
  <legend>Formulário:</legend>
  <form id="cad">
    <div>
      <label for="senha">Digite sua senha:</label>
      <input type="password" name="senha" id="senha" pattern="[^. ][A-Za-z0-9.]*[^. ][@][A-Za-z0-9.]*[^. ]" />
    </div>
    <div>
      <label for="senhaTmp">Confirme sua senha:</label>
      <input type="password" name="senhaTmp" id="senhaTmp" pattern="[^. ][A-Za-z0-9.]*[^. ][@][A-Za-z0-9.]*[^. ]" onblur="return validarSenha()" />
    </div>
    <input type="reset" name="limpar" />
    <input type="submit" onclick="return validarSenha()" value="Cadastrar" />
  </form>
</fieldset>

Perceba que, assim, logo que é terminado de confirmar a senha e tirar o foco do campo, a validação ocorrerá, já informando o usuário que algo está errado. Neste caso um alert, que impede o usuário de seguir preenchendo mesmo com a senha errada, o que não é interessante. O ideal seria destacar o campo - geralmente em vermelho -, com a mensagem de erro logo abaixo do mesmo. Um exemplo disso é como o Material faz:

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .