3
votes

Numéro d'entrée - la validation de la contrainte max ne fonctionne pas

J'ai un champ de saisie numéro que vous pouvez voir sur l'extrait ci-dessous, cela semble fonctionner mais il y a un bogue.

Lorsque vous insérez 89, cela fonctionne et renvoie la valeur maximale comme prévu.

Mais si le premier chiffre est inférieur à 7, cela ne fonctionne pas (tout nombre inférieur à 69). Il compare uniquement le premier chiffre et non le dernier chiffre.

Comment puis-je l'utiliser correctement?

Merci!

<input type="number" name="teste" id="teste"
       value="0" min="0" max="7" 
       onchange="javascript: if (this.value > this.max) this.value = this.max;" />

javascript html input validation

8 commentaires

Pourquoi avez-vous un gestionnaire onchange là-bas? w3schools.com/tags/att_input_max.asp

@Dellirium Veuillez ne pas créer de lien vers ou utiliser w3schools.

@ChrisG est-ce contre la politique de stackoverflow? Cependant, je n'utilise pas w3s pour quelque chose d'aussi simple que input max, il transmet le message et c'était le résultat google n ° 1, donc je l'ai lié.

@Dellirium Il doit s'éloigner de la place n ° 1, ce qui est l'une des raisons pour lesquelles vous ne devriez pas y faire un lien. Ce n'est pas contre la politique, mais au moins contre le bon goût.

@Dellirium, lisez ceci

Je veux dire, je suis tout à fait d'accord et je ne l'utilise pratiquement jamais moi-même, MDN est beaucoup mieux, mais au début, c'était trop technique, les w3 étaient plus conviviaux pour les newb.

onchange = "if (+ this.value> + this.max) this.value = this.max;"

Le libellé javascript: est inutile ici

3 Réponses :

2
votes

Peut-être convertir la valeur en entier avant la comparaison comme ceci:

   <input type="number" name="teste" id="teste" value="0" min="0" max="7" onchange="javascript: if (parseInt(this.value) > this.max) this.value = this.max;" />

1 commentaires

Exactement ce dont j'ai besoin. Je vous remercie!

0
votes

Les attributs HTML ne peuvent contenir que du texte (aucun autre type), donc vous effectuez un ordre lexicographique . Veuillez comparer:

console.log("27", typeof "27");
console.log(parseInt("27", 10), typeof parseInt("27", 10));

Comme il n'est pas très utile de trier les nombres par ordre alphabétique, vous pouvez extrait les nombres des chaînes :

console.log("27" > "7");
console.log(27 > 7);

De nos jours, le deuxième argument (base ou base) devrait par défaut à 10 dans la plupart des cas, mais le réglage évite explicitement les surprises.

0 commentaires

0
votes

Considérez le code: if (this.value> this.max) this.value = this.max;

Dans la fonction, les valeurs de input em > et le max sont utilisés et comparés sous forme de texte (ou de type de données chaîne). Votre intention est de comparer les chiffres. L'exemple fait cela:

Le HTML:

function test(elmnt) {

    console.log(typeof elmnt.value); // this returns "string"
    console.log(typeof elmnt.max);   // this returns "string"

    // convert string numbers to integer numbers
    let intVal = parseInt(elmnt.value);
    let maxInt = parseInt(elmnt.max);

    console.log("Input: " + intVal);

    if (intVal > maxInt) {
        intVal = maxInt;
    }

    console.log("Result: " + intVal);
    document.getElementById("result").innerHTML = intVal;
}

test.js:

<body>

    Result: <p id="result">0</p>

    <input type="number" name="teste" id="teste" 
           value="0" min="0" max="7" 
           onchange="test(this)" />

    <script src="test.js"></script>

</body>

0 commentaires