Password Validation with JS

Question

I have a code and in it I have a Javascript (which was passed by the teacher); this code is a form and I need to validate the informed passwords.

However, I am putting equal passwords and also different passwords and do not see any information - if it is identical passwords, registered done; if it is different, different passwords - someone could help me?

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>

Answer 1

The main problem that makes your code not work is by using getElementById for elements that do not have the attribute id defined. That is, to keep the code so, just define the attributes in the fields you need:

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>

Another detail, which does not influence the functioning, is that the element <br> should not be used to define the layout. Note that in the above example I used the element <div> to separate fields. The size of spaces, alignments, etc., that is, layout details, you will define in CSS. See more in:

<br> is obsolete?

Besides being interesting you advance the error message. The sooner you indicate to the user that something is wrong, the sooner it will fix. Instead of validating the password only in the form submission, do this as soon as it confirms the password. An example would be to use the event 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>

Note that, so, as soon as it is finished confirming the password and taking the focus of the field, the validation will occur, already informing the user that something is wrong. In this case a Alert, which prevents the user from continuing to fill even with the wrong password, which is not interesting. The ideal would be to highlight the field - usually in red -, with the error message just below it. An example of this is how Material does: