Comment empêcher l'utilisateur d'entrer en décimales?

Interceptez les événements clés pour le champ, détectez les caractères illégaux lors de la saisie, les empêchant d'entrer dans le champ et ajoutez un msg temporaire près du champ (inséré dans la page) qui explique quels caractères ou valeurs sont autorisés. Les alertes contextuelles sont une mauvaise façon de donner des commentaires au milieu de la saisie.

Ensuite, validez de nouveau avant la soumission, car il existe d'autres façons d'obtenir des données dans les champs (glisser / déposer, copier / coller, etc.) pour ne pas avoir tout attrapé.

Voici un exemple jQuery à la fois d'un seul entier et d'un champ décimal uniquement avec des messages temporaires affichés lorsque des clés non valides sont tapées:

Working jsFiddle: http://jsfiddle.net/jfriend00/CkDTy/

$(".integer").keypress(function(e) { if (e.which < 48 || e.which > 57) { showAdvice(this, "Integer values only"); return(false); } }); $(".decimal").keypress(function(e) { // 46 is a period if (e.which != 46 && (e.which < 48 || e.which > 57)) { showAdvice(this, "Decimal numbers only"); return(false); } if (e.which == 46 && this.value.indexOf(".") != -1) { showAdvice(this, "Only one period allowed in decimal numbers"); return(false); // only one decimal allowed } }); function showAdvice(obj, msg) { $("#singleAdvice").stop(true, false).remove(); $('<span id="singleAdvice" class="advice">' + msg + '</span>').insertAfter(obj); $("#singleAdvice").delay(4000).fadeOut(1500); } 

Vous pouvez ajouter un événement (en appuyant sur la touche) et détecter si un point décimal a été pressé par l'utilisateur ou non. Également sur la soumission de formulaire, utilisez des expressions régulières pour vérifier si les données soumises sont correctes (parce que l'utilisateur peut forger les données en utilisant un éditeur en direct comme firebug). Assurez-vous également de vérifier que, sur le côté de votre serveur, si l'utilisateur a désactivé javascript.

par exemple:

 <input type="text" onkeypress="checkDecimal();" /> <input type="submit" onclick="checkBeforeSubmit();" /> function checkDecimal() { // your code goes here } function checkBeforeSubmit() { // your code goes here } 

Il vaut mieux utiliser la même fonction parce que c'est fondamentalement la même chose et l'invoque des deux événements.

Du côté du serveur, vérifiez à nouveau les données soumises

Voici un jQuery qui empêche les entrées non numériques:

 $(function() { $('input').bind('keyup', function(event) { var currValue = $(this).val(); if(currValue.search(/[^0-9]/) != -1) { // Change this to something less obnoxious alert('Only numerical inputs please'); } $(this).val(currValue.replace(/[^0-9]/, '')); }); });