9

Gostava que à medida que preenchesse um dado input este fosse sendo validado, ou seja, à medida que fosse preenchendo um campo 'nif' que me fosse alertado uma mensagem de "nif inválido" até este estar correto e que não necessitasse de usar métodos como o onBlur.

Alguém conhece alguma maneira de o fazer?

O meu código:

function teste(){
  var input = document.getElementById("input").value;

  if(input == 5){
     document.getElementById("5").innerHTML = "sucesso";
  }else{
     document.getElementById("5").innerHTML = "insucesso";
  }
}
<input type="text" id="input" onchange='teste()'>
<h2 id="5"> </h2>

3

3 Respostas 3

7

Com o evento onkeyup você já consegue fazer sua validação. Se você utilizar o onkeydown a validação não ficará correta pois o seu input não terá o valor atual pressionado.

Veja um exemplo:

<html>
<body>

<h1>Input validation test</h1>

<input type="text" onkeyup="myFunction()" id='ipt' placeholder='Sucesso'>

<script>
function myFunction() {
  if (document.getElementById('ipt').value == "Sucesso")
    document.getElementById('ipt').style.backgroundColor = 'green';
  else
    document.getElementById('ipt').style.backgroundColor = 'red';
}
</script>

</body>
</html>

Espero ter ajudado.

7

Desnecessário o uso de Javascript (aliás, você não precisa de JS para muita coisa), tampouco jQuery. Usar um modelo simples de validação no <input> já lhe dá o resultado esperado:

input:invalid ~ [data-input-message]::after{
  content: 'Insira o valor 5';
  color: red
}

input:valid ~ [data-input-message]::after{
  content: 'Obrigado :)';
  color: green
}
<input type='text' placeholder='Insira o valor 5' pattern='[5]' required>
<span data-input-message></span>

2

Tem outro atributo de evento que chama a função à medida que digita no campo, que é o oninput:

function teste(){
  var input = document.getElementById("input").value;

  if(input == 5){
  document.getElementById("5").innerHTML = "sucesso";

  }else{
    document.getElementById("5").innerHTML = "insucesso";
  }
}
Digite 5:
<br>
<input type="text" id="input" oninput='teste()'>
<h2 id="5"> </h2>

Você deve fazer log-in para responder a esta pergunta.

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