Discussion :

[Gluups]

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 ...

[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...

[javatwister]

Bonjour,

Essaie ça:

Code html :

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

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 javascript :

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
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()
})

[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 :

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

(\d{3}\d)

et

Code :

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

(\d{4})

?

[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 JavaScript :

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

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.

[javatwister]

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 javascript :

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
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 javascript :

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
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,"");
})

[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 ?