Vous êtes dans la zone de contenu principal de la page

Contrôle de codes postaux internationaux

Postulat

Comment contrôler le format d'un code postal selon le pays et permettre l'ouverture du clavier ad hoc sur mobile en fonction des patterns de code postaux par pays.

Le code Javascript qui suit, permet de vérifier à la saisie que le format du code postal correspond au format officiel du pays de destination. Les pays pris en compte pour l'exemple sont la France, Pays Bas, États Unis, Royaume Uni, Belgique et Australie.

Compatibilité devices mobile/desktop
Contrôle du pattern à la saisie et indicateur visuel
Automatisation (ajout d'un simple attribut)
Evolution des patterns facilitée
Pattern par défaut personnalisable
Nécessite JQuery

nb : vous devez créer une classe CSS personnelle .error ou utiliser celle disponible dans les sources du site voir la feuille de styles

Comment ajouter un pattern de contrôle ?

[…]
  'us': { // clé pays
    'type': 'text', /* type d'input de saisie (text, number) */
    'inputmode': 'text', /* blocage des caractères à la saisie text = tous les caractères, numeric = que des chiffres */
    'length': null, /* maxlength */
    'regex': /^[0-9]{5}(?:(-| )[0-9]{4})?$/, /* le pattern autorisé */
    'only': / [0-9]\-/, /* liste des caractères autorisés à la saisie */
  }
[…]

Plus d'informations sur les formats des codes postaux par pays.

Exemples

Source Javascript $.fn.zipcode

/****
 * Copyright (c) 2006 2020. Kortic - Anthony Ladeuil. Source ladeuil.com
 * licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions
 * https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr
 ****/
 
 ;(function (__) {
  'use strict';
/*
  __.array_range = function(start, count){
    return Array(count).fill(0).map((e,i) => i + start);
  };
*/
  __.fn.zipcode = function(opts) {
    let settings = __.extend({
        'attribute': 'data-zipcode',
        'maxlength' : 10,
        'useLocale': false,
        'sendpattern': false
      }, opts),
      // inputmode disponible quand les navigateurs voudront bien l'implémenter.
      patterns = {
        'default': { // 5 digits type number
          'type': 'number',
          'inputmode': 'numeric',
          'length': 5,
          'regex': /^[0-9]{5}$/
        },
        'nl': {
          'type': 'text',
          'inputmode': 'text',
          'length': 10,
          'regex': /^(?:NL-)?(?:[1-9][0-9]{3} ?(?:[A-EGHJ-NPRTVWXZ][A-EGHJ-NPRSTVWXZ]|S[BCEGHJ-NPRTVWXZ]))$/i
        },
        'be': {
          'type': 'number',
          'inputmode': 'numeric',
          'length': 4,
          'regex': /^[0-9]{4}$/
        },
        'au': {
          'type': 'number',
          'inputmode': 'numeric',
          'length': 4,
          'regex': /^[0-9]{4}$/
        },
        'uk': {
          'type': 'text',
          'inputmode': 'text',
          'length': 8,
          'regex': /((?:(?:gir)|(?:[a-pr-uwyz])(?:(?:[0-9](?:[a-hjkpstuw]|[0-9])?)|(?:[a-hk-y][0-9](?:[0-9]|[abehmnprv-y])?)))) ?([0-9][abd-hjlnp-uw-z]{2})/,
          'only': /[0-9A-Z]/
        },
        'us': {
          'type': 'text',
          'inputmode': 'text',
          'length': null,
          'regex': /^[0-9]{5}(?:(-| )[0-9]{4})?$/,
          'only': / [0-9]\-/
        }
      };
    __(this).each(function() {
      let element_ = __(this),
        key = settings.useLocale === false ? ( element_.attr(settings.attribute).length ? element_.attr(settings.attribute).toLowerCase() : 'default') : settings.useLocale.toLowerCase(),
        pattern = patterns[ __.array_key_exists(key, patterns) ? key : 'default' ];
        element_.attr({
          'type': pattern.type,
          'inputmode': pattern.inputmode,
          'maxlength': pattern.length !== null ? pattern.length : settings.maxlength
        }).data('is_selected', false);
        if(pattern.type !== 'text') {
          element_.data('count', 0).attr({
            'min': 0,
            'max': '9'.repeat(pattern.length),
            'step': 1000
          });
        }
        // envoyer la regExp au back pour contrôle
        if(settings.sendpattern) {
          let inputPattern = __('<input/>', {
            'type': 'hidden',
            'value': pattern.regex,
            'name': 'pattern'
          });
          element_.parents('form').append(inputPattern);
        }
        element_.on('input', function(){
          element_.removeClass('error');
          let reg = new RegExp( pattern.regex, 'ig');
          if(element_.val().length) {
            if(!reg.test(element_.val())){
              element_.addClass('error');
            }
          }
        }).on('keyup keydown touchstart touchend', function(e) {
          let currentVal = element_.val().trim();
          if( __.inArray(e.type, ['keyup', 'touchend']) !== -1) {
            element_.data('count', currentVal.length);
          }
          element_.data('is_selected', window.getSelection().toString().length > 0);
          if(pattern.inputmode === 'numeric' && __.inArray(e.type, ['keydown', 'touchstart']) !== -1) {
            if ( __.inArray(e.which, [38, 40]) != -1 ) {
              e.preventDefault();
            }
            if ( __.inArray( parseInt(e.which, 10), __.range(48, 10).concat([8, 9, 13]).concat(__.range(37, 4)) ) == -1 ) {
              e.preventDefault();
            }
            if ( element_.data('count') == element_.attr('maxlength') && __.inArray( parseInt(e.which, 10), __.range(48, 10)) != -1 && !element_.data('is_selected') ) {
              e.preventDefault();
            }
            if ( currentVal.length > element_.attr('maxlength') ) {
              element_.val(currentVal.substr(0, element_.attr('maxlength')));
            }
          }
        });
      return this;
    });
  };
  __(document).ready( function() {
    // appel générique pour les champs avec attribut data-zipcode
    __('[data-zipcode]').zipcode({
      'sendpattern': true // ajoute un champ caché dans le formulaire parent du champ pour envoyer la RegExp pour traitement back
    });
    /*
     **
     ***
      appel pour les champs avec attribut data-specific et/ou variable locale définie
      __('[data-specific]').zipcode({
        'attribute': 'data-specific',
        'useLocale': 'fr' // ou variable js globale
      });
     ***
     **
    */
  });
})(jQuery);

Utilisation des sources

Les sources de « Contrôle de codes postaux internationaux » proposées par Kortic sont mises à disposition selon les termes de la licence Creative Commons CC BY-NC-SA 4.0 (licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions).

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 ™