Password Validation with JS

Question

Password Validation with JS

Navigation

#1 by (0 votes)

0

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 reported passwords.

However, I am putting in the same passwords and also different passwords and I do not see any information - if it is the same passwords, registered done; if different, different passwords - could anyone 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>

javascript

asked by anonymous 19.06.2018 / 15:05

1 answer

Login 2.0 Django, authentication FileUriExposedException error on Android N

score 0 · Answer 1

The main problem that causes your code to not work is to use getElementById for elements that do not have the id attribute set. That is, to keep the code like this, just set 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 operation, is that the <br> element should not be used to define the layout. Note that in the example above I used the <div> element to separate the fields. The size of the spaces, alignments, etc, that is, details of the layout, you define in the CSS. See more at:

< br > is obsolete?

In addition to being interesting you advance the error message. The sooner you tell the user that something is wrong, the sooner he will correct it. Instead of validating the password only when submitting the form, do so as soon as it confirms the password. An example would be to use the blur event:

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, as soon as the password is cleared and the focus of the field is cleared, the validation will occur, informing the user that something is wrong. In this case an 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 the Material does: