IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Formatage des numéros de cartes bleues


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre émérite
    Profil pro
    Développeur Web
    Inscrit en
    Février 2008
    Messages
    2 906
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2008
    Messages : 2 906
    Par défaut 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 ...

  2. #2
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2020
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Loiret (Centre)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : Juin 2020
    Messages : 22
    Par défaut
    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...

  3. #3
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 684
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 684
    Par défaut
    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()
    })

  4. #4
    Membre émérite
    Profil pro
    Développeur Web
    Inscrit en
    Février 2008
    Messages
    2 906
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2008
    Messages : 2 906
    Par défaut
    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
    et
    ?

  5. #5
    Membre émérite
    Profil pro
    Développeur Web
    Inscrit en
    Février 2008
    Messages
    2 906
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2008
    Messages : 2 906
    Par défaut
    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.

  6. #6
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 684
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 684
    Par défaut
    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,"");
    })

  7. #7
    Membre émérite
    Profil pro
    Développeur Web
    Inscrit en
    Février 2008
    Messages
    2 906
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2008
    Messages : 2 906
    Par défaut
    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 ?

Discussions similaires

  1. [MLD] Gérer des numéros de cartes
    Par Kropernic dans le forum Schéma
    Réponses: 11
    Dernier message: 03/03/2016, 10h28
  2. Formatage des nombres à l'affichage
    Par nbutin dans le forum SQL Procédural
    Réponses: 3
    Dernier message: 13/07/2004, 10h54
  3. formatage des requêtes sous psql
    Par Bouboubou dans le forum PostgreSQL
    Réponses: 2
    Dernier message: 03/02/2004, 11h10
  4. Calcul des numéros de semaine d'un calendrier
    Par Invité dans le forum Algorithmes et structures de données
    Réponses: 4
    Dernier message: 06/11/2002, 21h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo