J'utilise javascript pour vérifier la longueur de la hauteur saisie par l'utilisateur, mais le problème auquel je suis confronté est que même javascript vérifie simplement le premier numéro de l'entrée et génère une erreur. Par exemple, si je dois entrer 45 dans la hauteur, j'obtiens une erreur, la hauteur doit être comprise entre 6 et 36 juste après avoir entré 4, cela ne me laisse pas entrer 5 et lorsque j'essaie de supprimer le mouvement et que l'entrée devient vide, elle lance à nouveau un la hauteur d'erreur doit être comprise entre 6 et 36. Veuillez m'aider à trouver le problème.

<input type="number" id="message1" name="height" oninput="function_two()">

function function_two() {
    var FrameHeight = document.getElementsByName('height')[0].value;
    if (FrameHeight <= 36 && FrameHeight >= 6) 
        return true;
    else 

    alert("Height must be between 6-36");
  }
0
Navroop 21 nov. 2018 à 01:46

7 réponses

Meilleure réponse

@TinyGiant merci. ça a marché

onchange="function_two()"
0
Navroop 21 nov. 2018 à 16:20

La fonction est ok. 4 est inférieur à 6, il génère donc une erreur. La meilleure façon de procéder consiste à exécuter la fonction une fois que l'utilisateur a fini de taper. Pour ce faire, modifiez la section html à onchange.

<input type="number" id="message1" name="height" onchange="function_two()"> 


function function_two() {
 var FrameHeight = this.value;
  if( trim (value ) == '' ){
     return false;
   }
  if (FrameHeight < 6 || FrameHeight > 36) { 
     alert("Height must be between 6-36");
   } 
}
1
Edwin Dijas Chiwona 20 nov. 2018 à 23:32

Vous validez chaque frappe entrée, vous pouvez donc combiner une combinaison de oninput et onblur pour valider la valeur entière et les frappes au fur et à mesure.

Essayez quelque chose comme ceci:

<html>
<head>
<style>
    input.invalid {
        background-color: red;
    }
</style>
<script>
    function validateInput(inputElement) {
       var frameHeight = inputElement.value
       if (isValidHeight(frameHeight)) {
           inputElement.className = ""
       } else {
          inputElement.className = "invalid"
       }
    }

    function validateFrameHeight(inputElement) {
        var frameHeight = inputElement.value
        if(!isValidHeight(frameHeight)) {
            alert("Height must be between 6-36");
        }
    }

    function isValidHeight(frameHeight) {
        return frameHeight <= 36 && frameHeight >= 6
    }
</script>
</head>
<body>

    <input class="invalid" type="number" id="message1" name="height" oninput="validateInput(this)" onblur="validateFrameHeight(this)">

</body>
0
Ian Pilipski 20 nov. 2018 à 23:14

Je pense que l'événement Focus Out aiderait https://api.jquery.com/focusout/

0
Jagjit Singh 30 nov. 2018 à 16:47

On dirait que vous avez quelques problèmes et donc quelques solutions possibles

Si vous souhaitez que l'erreur apparaisse après votre premier caractère mais que vous souhaitez continuer à saisir des caractères jusqu'à ce que les conditions soient remplies, essayez d'afficher l'erreur en l'ajoutant à votre page quelque part au lieu d'utiliser alert.

Si vous souhaitez uniquement vérifier la valeur lorsque quelqu'un a fini de taper, vous pouvez utiliser onchange au lieu de oninput, bien que cela signifie que l'utilisateur devra défocaliser l'entrée.

Si vous souhaitez vérifier la valeur lorsque quelqu'un a fini de taper mais sans avoir à défocaliser l'entrée, vous devez envisager d'utiliser une fonction anti-rebond. Underscorejs en a un bon ou vous pouvez écrire le vôtre.

1
nathan.medz 20 nov. 2018 à 22:51

Comment le code est-il censé savoir combien de chiffres vous souhaitez ajouter? Pour qu'il déclenche la validation? À l'heure actuelle, la fonction est appelée chaque fois que l'utilisateur donne une entrée, c'est-à-dire chaque fois qu'un utilisateur tape.

Je vous suggère soit d'utiliser change comme événement, qui est déclenché lorsque l'utilisateur quitte l'entrée après l'avoir modifiée, soit de changer le type en range. De cette façon, vous n'avez pas besoin de faire la validation.

Je vous conseille d'utiliser <input type="range" min="6" max="36" step="1" /> si tu peux. Notez qu'il n'est pas pris en charge par tous les navigateurs car il s'agit d'un élément HTML5.

2
Kristjan Kica 20 nov. 2018 à 23:21

Vous utilisez le mauvais événement (input), qui se déclenche lorsque toute entrée est donnée au champ. Utilisez l'événement change, qui se déclenche lorsque la valeur change et que le champ perd le focus.

De plus, séparez votre JavaScript de votre HTML. Gérez votre événement avec des pratiques modernes basées sur des normes, plutôt qu'avec des attributs d'événement HTML en ligne, qui ne doit pas être utilisé.

Voir les commentaires ci-dessous pour d'autres ajustements à la solution qui rendent le code plus efficace et / ou le mettent à jour aux normes modernes.

// Get your DOM reference just once. .querySelector() is preferred
// over .getElementsByName, .getElementsByTagName, .getElementsByClassName
// as the former returns a static node list and the latter(s) return 
// live node lists that hurt performance.
let nameInput = document.querySelector("input[name='height']");

// And set up event handlers in JavaScript, not HTML
nameInput.addEventListener("change", rangeCheck);

// Name functions with descriptive names as to what they do.
// Don't use the word "function" in a function name.
function rangeCheck() {
    // In a DOM event handler, you can just use "this" as a reference
    // to the DOM element that triggered the event.
    var FrameHeight = this.value;
    // Just test for the bad values and act accordingly
    if (FrameHeight < 6 || FrameHeight > 36) {
      alert("Height must be between 6-36");
    }
}
<input type="number" id="message1" name="height">
2
Scott Marcus 21 nov. 2018 à 12:40