Validate password confirmation field, why does confirming field not work?

Asked

Viewed 181 times

0

alert('aa');
function validar() {
//campo nome
	if (form.nome.value == "") {
		document.getElementById("erro").innerHTML = "Por favor, preencha o campo nome.";
		document.getElementById("erro").style.color = "red";

		return false;
	}

//campo senha

	if (form.senha.value.length > 0 && form.senha.value.length < 3) {
		var erro = document.getElementById('errosenha');
		erro.innerHTML="senha fraca";
		erro.style.color="red";
		return false;
	} 
	 if (form.senha.value.length >= 3 && form.senha.value.length < 5) {
		var erro = document.getElementById('errosenha');
		erro.innerHTML = "senha média";
		erro.style.color = "orange";
		return false;
	}
	 if (form.senha.value == "") {
		var erro = document.getElementById('errosenha');
		erro.innerHTML = "Por favor, preencha o campo senha.";
		erro.style.color = "red";
		return false;
  } 
    if (form.senha.value.length > 6) {
  	var erro = document.getElementById('errosenha');
  	erro.innerHTML = "senha forte";
		erro.style.color="green";
		return false
  }

//campo confirmação

    if (form.senha.value.length != form.senha2.value.length) {
  	var erro2 = document.getElementById('confirm');
  	erro2.innerHTML = "Por favor confirme sua senha corretamente.";
  	return false
  }

}
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script src="e1a.js"></script>
</head>
<body>

<form name="form" onsubmit="return validar()" action="entrou.html">
	Nome: <input type="text" name="nome"> <span id="erro" ></span> <br><br> 
	Senha: <input type="password" name="senha"> <span id="errosenha"></span> <br><br>
	Confirmar senha: <input type="password" name="senha2"> <span id="confirm"></span> <br> <br>
	<input type="submit" value="enviar" >      
</form>

</body>

</html>

javascript form validation

  • You want to validate if the passwords are equal?

  • yes, that’s right

2 answers

0

To validate whether the passwords are equal, you should compare the contents of the fields and not the size of the contents.

See, you made the comparison by taking the content size (length):

if (form.senha.value.length != form.senha2.value.length) {

But if the password is "teste" and the confirmation is "12345", its validation will be true because both strings have the same size.

To fix this, just use the property only value in his comparison:

if (form.senha.value != form.senha2.value) {

Your code will look like this:

function validar() {
  //campo nome
  if (form.nome.value == "") {
    document.getElementById("erro").innerHTML = "Por favor, preencha o campo nome.";
    document.getElementById("erro").style.color = "red";

    return false;
  }

  //campo senha
  if (form.senha.value.length > 0 && form.senha.value.length < 3) {
    var erro = document.getElementById('errosenha');
    erro.innerHTML="senha fraca";
    erro.style.color="red";
    return false;
  }

  if (form.senha.value.length >= 3 && form.senha.value.length < 5) {
    var erro = document.getElementById('errosenha');
    erro.innerHTML = "senha média";
    erro.style.color = "orange";
    return false;
  }

  if (form.senha.value == "") {
    var erro = document.getElementById('errosenha');
    erro.innerHTML = "Por favor, preencha o campo senha.";
    erro.style.color = "red";
    return false;
  }

  if (form.senha.value.length > 6) {
    var erro = document.getElementById('errosenha');
    erro.innerHTML = "senha forte";
    erro.style.color="green";
    return false
  }

  //campo confirmação
  if (form.senha.value != form.senha2.value) {
    var erro2 = document.getElementById('confirm');
    erro2.innerHTML = "Por favor confirme sua senha corretamente.";
    return false
  }

}
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>

  <form name="form" onsubmit="return validar()" action="entrou.html">
      Nome: <input type="text" name="nome"> <span id="erro" ></span> <br><br> 
      Senha: <input type="password" name="senha"> <span id="errosenha"></span> <br><br>
      Confirmar senha: <input type="password" name="senha2"> <span id="confirm"></span> <br> <br>
      <input type="submit" value="enviar" >      
  </form>

</body>
</html>

0

To another answer explained the problem of using only length to compare passwords, but would like to suggest some more details.

The if's to test the various password conditions can be improved. I would do something like this:

if (form.senha.value == "") {
    // erro
    return false;
}

if (form.senha.value.length < 3) {
    // senha fraca
    return false;
}

if (form.senha.value.length < 5) {
    // senha média
    return false;
}

First I test if it is empty (and if it is, the function already returns false and therefore does not even test the other conditions).

If the password is not empty, it means that for sure length is greater than zero, so I don’t need to test this condition again in the second if. I just need to test if it’s less than 3.

If the password size is greater than or equal to 3, it does not enter the first nor the second if. So if it came to the third if is because for sure the size is >= 3 and I don’t need to test this condition again (I just need to see if it’s less than 5).

In addition to staying more succinct and avoiding unnecessary comparisons, this also facilitates maintenance. If the value ranges change (for example, weak password is the one with up to 4 characters instead of 3), you only need to change once - the way it was before, you would need to change in more than one place.

But there is still one detail that got weird. If the size is 5 or 6, it does not enter any of the if's (the password is not considered weak, medium or strong). That’s right?

And if the size is greater than 6, the password is strong but it returns false also (strong passwords are invalid? Very strange).

Anyway, I modified a little the conditions to consider that passwords with size between 3 and 5 are average and invalid, and 6 up are strong and valid:

function validar() {      
  // campo nome
  if (form.nome.value == "") {
    document.getElementById("erro").innerHTML = "Por favor, preencha o campo nome.";
    document.getElementById("erro").style.color = "red";
    return false;
  }

  // não precisa buscar esse elemento toda hora, busque uma vez só e pronto
  var erro = document.getElementById('errosenha');
  // campo senha
  if (form.senha.value == "") {
    erro.innerHTML = "Por favor, preencha o campo senha.";
    erro.style.color = "red";
    return false;
  }

  if (form.senha.value.length < 3) {
    erro.innerHTML = "senha fraca";
    erro.style.color = "red";
    return false;
  }

  // mudar < para <=
  if (form.senha.value.length <= 5) {
    erro.innerHTML = "senha média";
    erro.style.color = "orange";
    return false;
  }

  // se chegou aqui é porque não entrou em nenhum dos if's acima, ou seja
  // neste ponto a senha com certeza tem 6 ou mais caracteres
  erro.innerHTML = "senha forte";
  erro.style.color = "green";
  // não retorno false porque senhas fortes são válidas
 
  //campo confirmação
  if (form.senha.value != form.senha2.value) {
    var erro2 = document.getElementById('confirm');
    erro2.innerHTML = "Por favor confirme sua senha corretamente.";
    return false;
  }
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>

  <form name="form" onsubmit="return validar()" action="entrou.html">
      Nome: <input type="text" name="nome"> <span id="erro" ></span> <br><br> 
      Senha: <input type="password" name="senha"> <span id="errosenha"></span> <br><br>
      Confirmar senha: <input type="password" name="senha2"> <span id="confirm"></span> <br> <br>
      <input type="submit" value="enviar" >      
  </form>

</body>
</html>

Browser other questions tagged javascript form validation

You are not signed in. Login or sign up in order to post.