validation en direct avec javascript - onchange déclenché une seule fois

Question

Je teste donc simplement quelque chose avec js, fondamentalement le nombre dans la première entrée doit être plus grand que le nombre dans la deuxième entrée pour que le bouton de soumission soit activé.

Le bouton est désactivé correctement, mais si je change le numéro, il ne se réactivera pas

<!DOCTYPE HTML>
<html>
<body>
<input type='number' id='first' onchange="validateNumber()"/><br>
<input type='number' id='second' onchange="validateNumber()"/><br>
<script type="text/javascript" >
function validateNumber()
{
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;

if(first > second){
document.getElementById('sub').disabled=false;
}else{
document.getElementById('sub').disabled=true;   
}


}
</script>
<input type="submit" id="sub"/>
</body>
</html>

Modifier: les flèches du déclencheur de saisie de nombre lors du changement semblent avoir causé le problème

javascript html validation onchange

6

deemel 12 nov. 2011 à 17:49

Answer 1

Vous devez ajouter les événements onclick et onkeyup afin de répondre aux interactions de la souris et aux insertions du presse-papiers:

http://jsfiddle.net/wzvvN/1

<input type='number' id='first' onkeyup="validateNumber()" onclick="validateNumber()" onchange="validateNumber()" />

<input type='number' id='second' onkeyup="validateNumber()" onclick="validateNumber()" onchange="validateNumber()" />

5

ComFreek 12 nov. 2011 à 14:38

Answer 2

Vous pouvez utiliser onkeyup(), car onchange() n'est appelé que lorsque vous basculez le focus sur un autre élément.

De plus, votre fonction compare actuellement des chaînes. Utilisez parseInt pour convertir en entier, puis comparez. Le code suivant fonctionne pour moi:

<html>
<body>
<input type='number' id='first' onkeyup="validateNumber()"/><br>
<input type='number' id='second' onkeyup="validateNumber()"/><br>
<script type="text/javascript" >
function validateNumber()
{
  var first = parseInt(document.getElementById('first').value, 10);
  var second = parseInt(document.getElementById('second').value, 10);

  if(first > second){
    document.getElementById('sub').disabled=false;
  } else {
    document.getElementById('sub').disabled=true;   
  }
}
</script>
<input type="submit" id="sub" disabled="disabled" />
</body>
</html>

3

AbdullahC 12 nov. 2011 à 14:06

Answer 3

Essayez de lier les événements onfocus et onblur à.

<input type='number' id='first' onchange="validateNumber()" onfocus="validateNumber()" onblur="validateNumber()"/><br>
<input type='number' id='second' onchange="validateNumber()" onfocus="validateNumber()" onblur="validateNumber()"/><br>

3

Martin Borthiry 12 nov. 2011 à 13:59

validation en direct avec javascript - onchange déclenché une seule fois

3 réponses

Questions connexes

De nouvelles questions

javascript