Aide à la saisie d'un champ complexe

Utilisation de librairie Jasny pour améliorer l'expérience utilisateur à la saisie d'un champ complexe et intégration dans le BsFormHelper.




Introduction

Lors de la création d'un formulaire, il peut arriver d'avoir besoin que l'utilisateur saisisse ses données sous un format spécial. Malgré la mise en place d'explications (via un label, un placeholder, un tooltip ou autre), l'utilisateur pourra encore se tromper et générer alors des erreurs ou des dysfonctionnements lors des traitements. Il existe plusieurs méthodes permettant de guider l'utilisateur dans ses saisies, comme par exemple utiliser un "datepicker" lors de la saisie d'une date ou écrire des fonctions de vérification en javascript.

Nous souhaitons dans cet article vous présenter la fonctionnalité "input-mask", créée par Jasny dans son extension de Bootstrap. Cette fonctionnalité va nous permettre de guider et controler ce que l'utilisateur saisit.

Remarque : Cette fonctionnalité nous permet d'accompagner l'utilisateur dans sa saisie côté client. Cela ne garantit pas la sécurité des données. Il est toujours nécessaire de valider et controler les données côté serveur pour assurer la sécurité de son site web / application.


Exemple d'un formulaire de saisie d'informations bancaires

L'exemple de la carte bancaire est intéressant car tous les champs doivent respecter un format spécifique.

Exemple input mask
Formulaire de saisie d'informations bancaires


Voici les différentes étapes de saisie, avec à chaque fois l'accompagnement utilisateur généré par la fonctionnalité "input-mask" :

Exemple input mask Exemple input mask Exemple input mask
Saisies successives des données


Utilisation dans CakePHP

Remarque : Il faut être en possession de la dernière version de notre Plugin BsHelpers pour CakePHP pour faire fonctionner le code ci-dessous.


// Conteneur principal
echo $this->Bs->container().
     $this->Bs->row().
     $this->Bs->col('xs12', 'sm6 of3').

     '<div class="payment">'.

        // Titre
        '<div class="payment-heading">'.
            '<h3 class="payment-heading-title">Payer votre achat de 20.00 €</h3>'.
        '</div>'.

        '<div class="payment-body">'.
            
            // Début du formulaire
            $this->BsForm->create('Product', array('action' => 'payment', 'class' => 'inline')).
            
            $this->BsForm->input('card_number', 
                array(
                    'label' => 'Numéro de Carte',
                    'placeholder' => '1111 2222 3333 4444',
                    'data-mask' => '9999 9999 9999 9999' // Configuration inputmask
                )).

            $this->Bs->row().
                $this->Bs->col('xs6').
                    $this->BsForm->input('expiration_date', 
                        array(
                            'label' => 'Date d\'expiration',
                            'placeholder' => 'MM / AA',
                            'data-mask' => '99 / 99' // Configuration inputmask
                        )).
                $this->Bs->close().
                $this->Bs->col('xs6').
                    $this->BsForm->input('code_cvc', 
                        array(
                            'label' => 'Code CVC',
                            'placeholder' => '123',
                            'data-mask' => '999' // Configuration inputmask
                        )).
                $this->Bs->close().
            $this->Bs->close().

            '<br />'.
            $this->BsForm->submit('Valider mon achat', array('class' => 'btn btn-block btn-success btn-lg')).

            $this->BsForm->end().
        '</div>'.
    '</div>'.

$this->Bs->close(3);

Détaillons cette partie du code qui permet de créer le premier champ du formulaire :


echo $this->BsForm->input('card_number', 
                array(
                    'label' => 'Numéro de Carte',
                    'placeholder' => '1111 2222 3333 4444',
                    'data-mask' => '9999 9999 9999 9999' // Configuration inputmask
                ));

Les attributs label et placeholder sont des attributs classiques déjà disponibles dans le (Bs)FormHelper de CakePHP.

L'attribut data-mask va permettre quant à lui de configurer le format à saisir par l'utilisateur. Plusieurs valeurs sont possibles, le fonctionnement est quelque peu similaire à celui des expressions régulières :

  • 9 -> un nombre
  • a -> une lettre
  • w -> un caractère alphanumérique
  • * -> n’importe quel caractère
  • ? -> un caractère spécial optionnel

Un attribut data-placeholder peut également être configuré pour générer le placeholder automatiquement. Dans cet exemple, en renseignant data-placeholder à 0, le champ aurait contenu comme placeholder "0000 0000 0000 0000".

Nouveauté dans le BsHelper, vous n'avez pas besoin de vous soucier de gérer l'appel au javascript associé à inputmask. Le BsHelper le charge pour vous seulement si vous appelez une des ses options. Tous les détails ici.




Conclusion

Nous avons vu dans cet article comment améliorer l'expérience utilisateur pour la saisie d'un champ qui requiert un format particulier. N'oubliez pas que cela n'assure pas la sécurité des données envoyées par l'utilisateur. Il lui suffit par exemple de désactiver Javascript pour passer outre ces contrôles.

N'hésitez pas à faire quelques essais des différentes options et pourquoi pas à nous proposer vos meilleures utilisations dans la zone de commentaires ci-dessous.

Les liens importants :




Bonus

En bonus, voici le CSS qui permet de reproduire le formulaire ci-dessus :

.payment-heading {
    border: 1px solid #ccc;
    background: #3498db;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.payment-heading-title {
    color: white;
    margin: 0;
    padding: 15px;
    font-weight: 300;
    font-size: 18px;
    text-align: center;
}

.payment-body {
    padding: 7%;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background: #f7f7f7;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.btn {
    font-weight: 300;
}





comments powered by Disqus





Vous avez un projet ? Contactez-nous.

Agence web basée à Rennes, nous avons aussi l'habitude de travailler à distance avec des gens situés à Paris, Lyon, Nantes, etc. Donc peu importe votre localisation ou l'avancement dans la réflexion de votre projet, laissez-nous vos coordonnées et nous vous recontacterons très vite pour en parler plus en détails.


4 bis allée du Bâtiment, 35000 Rennes
06.47.52.18.78     a.weill@webandcow.com