Deux décimales avec un point, mais un seul point

**daphi** · 09/06/2016, 11h44

bonjour,

je suis plutôt développeur php, mais pour mes besoins, un collègue m'a fournit une fonction qui, en théorie permet de fixer le nombre de décimales à 2 chiffres dés que l'utilisateur clic ailleurs.
Le séparateur étant le point.

Cependant, je me rends compte que l'utilisateur peut saisir plusieurs point dans le champ input (exemple : 21.03.04). Et dans ce cas, la fonction est inactive.

Voici la fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$('.two-digits').keyup(function(){
     if($(this).val().indexOf('.')!=-1){         
         if($(this).val().split(".")[1].length > 2){                
             if( isNaN( parseFloat( this.value ) ) ) return;
             this.value = parseFloat(this.value).toFixed(2);
         }  
      }            
      return this; //for chaining
   });

Auriez-vous une idée pour que seul les chiffres décimaux, avec 2 chiffres après la virgule ne soient pris en compte à la perte de focus du champ input ?

Merci

**NoSmoking** · 09/06/2016, 13h03

Bonjour,
pourquoi ne pas faire directement un truc du style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var valeur = parseFloat($(this).val());
if( !isNaN( valeur){
  return valeur.toFixed(2);
}
// avec 21.03.04 tu obtiendra 21.03

il sera peut être nécessaire également de gérer les virgules.

**SpaceFrog** · 09/06/2016, 14h53

Sujet déja traité maintes fois => Une petite recherche s'impose...

**daphi** · 09/06/2016, 15h01

je ne dois sans doute pas mettre le ou les bons mots dans le champ de recherche....j'ai fais une recherche avec "décimale" et j'ai parcouru les 14 pages....juste sur le sujet, et je n'ai pas trouvé mon bonheur....désolé....

**SpaceFrog** · 09/06/2016, 15h03

https://www.google.fr/search?q=devel...format+decimal

**daphi** · 09/06/2016, 16h04

merci, je regarde

**SylvainPV** · 09/06/2016, 21h55

la version standard HTML5 sans besoin de JS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="number" step="0.01" pattern="^[0-9]+\.[0-9]{0,2}$">

Nom : ZUATSBS.png
Affichages : 252
Taille : 7,7 Ko

Démo : https://jsfiddle.net/y1w1hg0e/

**daphi** · 10/06/2016, 07h17

Merci pour votre réponse.

Cependant, j'utilise les onglets (bootstrap) et si la personne saisie une valeur erronée sur un onglet, qu'elle passe à un autre onglet tout en restant dans le champ ou la valeur est erronée, puis qu'elle valide son formulaire, le message d'erreur propre au html5 se met en haut à gauche du navigateur.

La personne ne sait donc pas ou et sur quel onglet il y a une valeur erronée.

C'est pour cela que je cherche la méthode qui, dés la saisie, détecte si la valeur est correcte.

D'après les réponses, il me faudrait apparemment une regex dans un script qui détecte la conformité au fur et à mesure que l'utilisateur fait sa saisie.

**SylvainPV** · 10/06/2016, 10h49

L'API de validation des formulaires te permet de détecter quand une erreur survient et pointer vers le bon onglet. Regarde ce lien pour en savoir plus : https://developer.mozilla.org/fr/doc...ees_formulaire

Je préconise la solution standard qui a l'avantage d'être accessible, localisée et sémantique.

**daphi** · 10/06/2016, 12h49

merci pour ce lien.

je sais ce à quoi je vais occuper mon week-end...de la saine lecture.

**daphi** · 06/07/2016, 21h15

bonjour,

moi et un collègue tentons de restreindre un champ input number à 2 décimales sur tous les navigateurs.

Pour cela, j'ai un champ <input type="number" step="0.01" pattern="[0-9]+([\.|,][0-9]+)?" />

et un javascript ci-dessous pour empêcher la 3eme decimale, la virgule, une classe two-digits sur tous les champs de type number

Ce code fonctionne bien sous chrome, mais firefox non, car pour lui, le point est un séparateur de millier, et pas un séparateur de décimale.

Mon collègue est en congés, et c'est lui qui est spécialisé dans javascript jquery, et moi php.

Auriez-vous déjà eu à gérer ce genre de chose (empêcher la 3eme décimale, compatible avec IE, firefox et chrome) ?

Merci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$(':input.two-digits[type="number"]')
            .on('keypress',function(e){
                /*if(e.ctrlKey==true && e.charCode == 118){
                    $(this).trigger('focusout');
                    return this;
                }*/
 
                if($.inArray(e.keyCode,[37,39,35,36,8,9,46])==-1){
                    //var input = String.fromCharCode(e.charCode);
                    var regex = new RegExp("[0-9\.]");
                    if (regex.test(e.key)) {
                        return this;
                    } else {
                         e.preventDefault();
                    }
 
                } else {
                    return this;
                }
            })
            .on('keyup',function(e){
                if($(this).val().indexOf('.')!=-1){         
                    if($(this).val().split(".")[1].length > 1){                
                        if( isNaN( parseFloat( this.value ) ) ) return;
                        this.value = parseFloat(this.value).toFixed(2);
                    }  
                }
                return this; //for chaining
            })
            .on('focusout',function(e){
                var txt =$(this).val();
                //console.debug(regex.test('[-+]?([0-9]*.[0-9]+|[0-9]+)'));
                var regex = new RegExp(/^[+-]?(?:[1-9]\d*|0)?(?:\,\d{1,2})?$/gm);
                if($(this).val()!=""){
                    $(this).removeClass('input_grand_obligatoire');
                    if(regex.test($(this).val())){
                         $(this).parent().removeClass('has-error');
                    } else {
                         $(this).parent().addClass('has-error');
                         $(this).val("");
                    };
                }
            });

**daphi** · 07/07/2016, 13h03

j'ai lu https://developer.mozilla.org/fr/doc...ees_formulaire mais sauf erreur de ma part, il s'agit d'une vérification à priori, et non à posteriori.

Dans mon formulaire, il y a deux choix : enregistrer ou envoyer

Si l'utilisateur clic sur "enregistrer", je ne vérifie rien.

S'il clic sur "envoyer", c'est là que les vérifications doivent s'opérer.

Cependant, si les vérifications peuvent se faire à la volée, pourquoi pas...

J'ai loupé quelque chose dans ce lien ?

**SylvainPV** · 07/07/2016, 19h35

Par défaut la validation s'applique à la soumission du formulaire, mais tout est configurable (voir novalidate). Tu peux appeler manuellement la validation quand ça te chante avec checkValidity.

**daphi** · 07/07/2016, 22h32

et c'est accepté depuis IE9 ?

j'en ai marre de ces navigateurs :-(

**SylvainPV** · 08/07/2016, 00h37

non je parierai pas là dessus, c'est du HTML5. Encore besoin de supporter IE9, alors que Microsoft a arrêté le support étendu ?

**daphi** · 08/07/2016, 09h00

effectivement, on m'impose de faire un développement compatible avec minimum IE9

Je pourrais éventuellement négocier un minimum de IE 10, mais les champs number ne fonctionnent pas non plus avec la version 10

**SylvainPV** · 08/07/2016, 10h35

Ce n'est pas qu'ils ne "fonctionnent pas", c'est qu'ils ne proposent pas d'aide à la saisie. Sémantiquement il reste correct d'indiquer type="number". Les flèches d'incrémentation/décrémentation ne font pas partie de la spec HTML5, on pourrait imaginer une aide à la saisie complètement différente pour un périphérique tactile par exemple.

**daphi** · 08/07/2016, 11h05

pour l'aide à la saisie, j'ai utilisé une classe css qui fait disparaître cette aide.

Vous confirmez donc que sous IE10, le type number à le même comportement que firefox et que le pattern, step et min seront fonctionnels ?

Pour chrome, malheureusement, il ne met pas le champ en rouge quand il ne respecte pas le pattern, alors que firefox oui.

Par contre, chrome bloque les lettres alors que firefox non, mais le champ est rouge.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="number" pattern="[0-9]+([\.|,][0-9]+)?" step="1" min="0" name="var19" value="" class="input_petit">

Je ne peux tester le comportement IE10 que chez moi, et je suis au boulot là.

**SylvainPV** · 08/07/2016, 11h54

Tous ces comportements sont personnalisables avec les différentes API de validation, je t'invite à relire plus en détail le lien MDN pour définir ton propre paramétrage (coloration des erreurs, blocage à la saisie etc..)

**daphi** · 08/07/2016, 12h13

excellent cette personnalisation...merci

il me reste à trouver comment utiliser le point du clavier numérique plutôt que la virgule avec firefox et retourner sur l'onglet qui comporte un champ non valide

Deux décimales avec un point, mais un seul point

JavaScript

Partager

Partager