Valider un numéro de carte bancaire

Script complet (CSS, JS, SVG) de validation à la volée de formats de cartes de crédit.
Le but n'est pas de faire un cours sur l'algorithme de Luhn et sur les patterns, le script valide le numéro selon le type de carte (Visa, Carte bancaire, Mastercard, Maestro, American Express, Discover, JCB Card, Diners Club).
La fonction est en deux partie :

credit_card_pattern qui vérifie la validité du numéro ;
une fonction « locale » qui utilise credit_card_pattern à adapter selon vos besoins.

$('[data-cc-type]').each( function() { let cardnumber = $(this); cardnumber.on({ 'input': () => { (cardnumber.val().length) ? (cardnumber.attr('data-valid', !cardnumber.credit_card_pattern() ? 'false' : 'true')) : cardnumber.attr('data-valid', null); } }); });

Code HTML

<label for="sample-cardnumber-visa">Carte Visa</label> <input type="number" data-cc-type="visa" class="credit-card-visa" id="sample-cardnumber-visa" placeholder="saisir un numéro Visa" autocomplete="off" /> /** attribut `data-cc-type` = visa|cb|mastercard|maestro|amex|discover|jcb|diners attribut `class` = credit-card-[data-cc-type] */

Carte Visa

Sources Javascript / CSS / SVG

Javascript : Afficher / télécharger cc-validator.js
Feuille de style : Afficher / télécharger cc-validator.css
Logos cartes (SVG) : Afficher / télécharger cc.svg

Exemple de validations

Saisir un numéro de carte dans un champ ou cliquer sur un numéro proposé. Pour chaque carte, le 2ème numéro est invalide.

Champ de saisie carte de crédit type Visa

Numéros « Visa » :: 4373 0977 3270 0163; 4291 1868 2920 9889

Champ de saisie carte de crédit type Carte bancaire

Numéros « Carte bancaire » :: 4737 2893 2381 1274; 4737 2893 5381 1374

Champ de saisie carte de crédit type Mastercard

Numéros « Mastercard » :: 5374 0521 0623 4089; 5374 0521 0622 4089

Champ de saisie carte de crédit type Maestro

Numéros « Maestro » :: 5282 4065 4325 9318; 5282 4065 4325 0318

Champ de saisie carte de crédit type American Express

Numéros « American Express » :: 3735 5071 1452 204; 3735 5071 1451 204

Champ de saisie carte de crédit type Discover

Numéros « Discover » :: 6011 2058 2673 3031; 6011 2058 2673 3030

Champ de saisie carte de crédit type JCB Card

Numéros « JCB Card » :: 3549 2173 2553 3422; 3549 2173 2553 3423

Champ de saisie carte de crédit type Diners Club

Numéros « Diners Club » :: 3004 2745 8721 31; 3004 2745 8721 41

Source des numéros : https://ccardgenerator.com/fr/

Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…

Un petit sou avec ™

Voir aussi…

Vérifier un numéro de carte bancaire Vérification de carte bancaire, script de validation de carte bancaire. Contrôle de format de numéro de carte bancaire, algorithme de Luhn carte de crédit Visa, Mastercard, Maestro, CB, Carte Bancaire, Discover Card, American Express, JCB Cards
Owl Carousel multiple Gérer plusieurs carrousels/sliders sur une seule page avec Owl Carousel 2. Manage multiple carousels/sliders on one page with Owl Carousel 2
Conversion SVG/CSS Encodage SVG pour CSS compatible Sass, SVG encoder, base64 SVG pour CSS. SVG to base64, Convert SVG to Data URI for css
Optimisation SVG Intégration SVG via xlink/use/symbol, factorisation de symbol SVG, optimisation SVG web performance
SVG Responsive Utilisation des media queries internes au SVG
Lazy Load Intersection Observer Lazy Load avec IntersectionObserver API pour images, picture, iframe, etc. Chargement lazy load de contenu, chargement différé de contenu de page web, lazy loading script
Design, flux et accessibilité jQuery Responsive layout logical DOM plugin
Lightbox Responsive et Accessible Lightbox images jQuery Responsive accessible a11y. Automatisation d'une Lightbox multipages. Lightbox image unique ou multiple. Lightbox responsive et accessible a11y wcag
Tooltip (infobulle) a11y Tooltip (infobulle) compatible a11y et SEO, naviguable au clavier, accessible par lecteur d'écran. Infobulle accessible, accessible tooltip
Zipcode patterns Contrôle automatisé de codes postaux internationaux, script zipcode, zipcode validator
Responsive background-image jQuery responsive background-image plugin, plugin jQuery responsive background images
Drapeaux ISO 3366 SVG Drapeaux nationaux vectoriels normés ISO alpha 2, alpha 3 et numérotation Organisation des Nations Unies (ONU). Drapeaux SVG pour internationalisation de sites multilingues.
Layout rigolo Une autre approche pour définir un layout de page responsive.
Générateur de noms API de génération de couples prénom/nom aléatoires.

Soutenez Aquinum

J'y vais !