Formatage des numéros de cartes bleues

Version imprimable

18/06/2020, 11h52
Gluups

Formatage des numéros de cartes bleues

Bonjour tout le monde,

Certains sites web affichent les numéros de cartes bleues par groupes de quatre chiffres à mesure qu'on les tape, ce qui est largement plus lisible. Mais, il faut bien reconnaître que c'est loin de constituer l'unanimité.

Comment est-ce qu'on fait ça ?
L'affichage par groupes de quatre chiffres, je veux dire.

L'unanimité, ça, c'est une autre question ...
19/06/2020, 06h08
Dev2Digital

Bonjour,

Tout dépend de comment tu veux faire et où tu veux le faire.

En règle générale, je dirais en JavaScript en utilisant des fonctions qui surveillent les champs input et qui remettent en forme à chaque fois que tu entre un caractère.

Après tu veux aussi vérifier la validité d'un numéro de carte etc...

Bonjour,

Essaie ça:

Code:

1
2
3
4
5
<div>
	<label id="lab" for="num">numéro de compte </label>
	<input type="text "id="num" maxlength="19" />
        <input type="button" value="vérifier" />
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
document.getElementById('num').addEventListener('input', e => {
	const inp=e.target;
	if(e.data){
		inp.value=inp.value.replace(/\D/g,"")
		.replace(/(\d{3}\d)/g,"$1 ")
	}
})
document.getElementById('num').addEventListener('change', e => {
	const inp=e.target;
        inp.value=inp.value.trim();
	if(inp.value.length==19){
		document.getElementById('lab').textContent+=" validé."
	};
})
 
document.getElementById('num').addEventListener('paste', e => {
	e.preventDefault()
})

22/06/2020, 21h54
Gluups

Bonsoir,
Ah bon, ce n'est pas possible directement avec les styles CSS ?
Bon alors OK, une fois qu'on sait ça, ça devient plus évident.

Au fait, j'aurais une question : en matière d'expressions régulières, quelle est la nuance entre

Code:

(\d{3}\d)

et

Code:

(\d{4})

?
23/06/2020, 00h18
Gluups
Ah au fait, il y a un point à ne pas louper : un numéro de carte bleue ne peut en aucun cas contenir d'espace. Il ne peut contenir que des chiffres.

Et je me demande comment éviter que
Code:

1 2 inp.value=inp.value.replace(/\D/g,"") .replace(/(\d{3}\d)/g,"$1 ")
ne mette des espaces dans le numéro.

Si on fait ça, la commande sera refusée, pour cause de numéro invalide : le numéro de carte bleue ne peut contenir que des chiffres.

Je rappelle que j'ai posé ma question dans un forum sur les styles CSS.

Le but est d'afficher le numéro par tranches de quatre chiffres, mais en étant assuré de ne pas le modifier.

L'utilisateur tape 16 chiffres, le serveur reçoit 16 chiffres.
C'est à l'écran qu'on insère un espace tous les quatre chiffres.

Il convient de distinguer le format de validation de saisie, du format d'affichage.

Je ne confonds rien du tout; ton problème était d'ajouter un espace automatiquement tous les 4 chiffres; la validation, je n'avais pas l'intention de m'en occuper!

- solution 1: quand la saisie est valide et que l'utilisateur quitte le champ, tu compactes le numéro et le serveur ne recevra que les chiffres:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
document.getElementById('num').addEventListener('input', e => {
	inp=e.target;
	document.getElementById('lab').textContent="numéro de compte ";
	if(e.data){
		inp.value=inp.value.replace(/\D/g,"")
		.replace(/(\d{4})/g,"$1 ")// aucune différence! (reste de débogage)
	}
})
document.getElementById('num').addEventListener('change', e => {
	if(e.target.value.length==20){
		e.target.value=e.target.value.replace(/\s/g,"");
		document.getElementById('lab').textContent+=" validé.";
	};
})
document.getElementById('num').addEventListener('paste', e => {
	e.preventDefault()
})

- solution 2: Tu laisses les espaces apparents et quand tu soumets le formulaire, tu compactes le numéro:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
document.getElementById('num').addEventListener('input', e => {
	inp=e.target;
	document.getElementById('lab').textContent="numéro de compte ";
	if(e.data){
		inp.value=inp.value.replace(/\D/g,"")
		.replace(/(\d{4})/g,"$1 ")
	}
})
document.getElementById('num').addEventListener('change', e => {
	if(e.target.value.length==20){
		document.getElementById('lab').textContent+=" validé.";
	};
})
document.getElementById('num').addEventListener('paste', e => 
	e.preventDefault()
)
document.getElementById('monform').addEventListener('submit', () => {
    document.getElementById('num').value=document.getElementById('num').value.replace(/\s/g,"");
})

23/06/2020, 11h20
Gluups

Bon, OK, mais pour la plupart les serveurs ne font rien de tout ça.
Ma question était quel style apposer à l'aide de l'extension Stylus dans Firefox, pour que les numéros de cartes soient affichés proprement pendant la saisie ?
23/06/2020, 11h46
javatwister

Citation:

Envoyé par Gluups

la plupart les serveurs ne font rien de tout ça

Ne font pas quoi???

Je te donne un code prêt à l'emploi pour contrôler la saisie; tu l'as essayé? Rien à voir avec le serveur...
23/06/2020, 12h00
Gluups

Et tout ça, sans toucher au code de la page ?
23/06/2020, 12h18
javatwister

Bien sûr!

Dans mon exemple, il faut juste que tu appelles ton formulaire "monform":

Code:

<form id="monform">

et que tu donnes au champ un "name" pour que la valeur soit récupérée côté serveur:

Code:

<input type="text" name="num" id="num" maxlength="19" />