Formatage de champs (in)valides à l'aide de Javascript et CSS3

HTML permet de typer les champs de formulaires et CSS3 de les formater selon leur contenus attendus. Cependant, dans la version 1.9.0 (et antécédentes) de BreezingForms, un champ de texte reste de type text, qu'il soit prévu pour recevoir du texte, une adresse e-mail, une url, etc.

Version BF minimale requise : BreezingForms Lite

Voyons comment modifier cela dans vos formulaires BreezingForms avec un peu de JavaScript simple et apporter, avec un peu de CSS, un élément visuel attirant l'attention des utilisateurs sur les éléments mal saisis…

Mise en œuvre

Pour ce tutoriel, j'ai créé un formulaire simple, composé de 4 champs :

  1. Un champ de type Texte, libellé Texte classique et nommé text
  2. Un champ de type Texte, libellé E-Mail et nommé email
  3. Un champ de type Texte, libellé URL et nommé url
  4. Un champ de type Texte, libellé Téléphone et nommé phone

Les noms des champs sont à votre préférence et ne sont pas vraiment importants pour leur fonctionnement.

Si j'enregistre le formulaire comme tel et que j'examine le code html de ces champs sur le frontend de mon site, je m'aperçois qu'ils sont tous 4 de type "text". Le rendu est classique.

fieldtype 01fieldtype 02

Changement de type de champ

Voyons comment changer le type de nos champs E-Mail, URL et téléphone.

  1. Rendez-vous dans l'édition du formulaire.
  2. Sélectionnez le champs E-Mail et activez l'onglet Avancé du panneau des propriétés.
  3. En fin de ce panneau, dans la partie Scripts d'initialisation, cliquer le bouton Personnalisé et cocher l'option Entrée du formulaire puis cliquez le bouton Créer le code framework.
  4. Après la ligne case 'formentry':, tapez un retour chariot et saisissez :
    element.type = 'email';
    pour obtenir un résultat ressemblant à celui-ci :
    function ff_email_init(element, condition)
    {
        switch (condition) {
            case 'formentry':
                    element.type = 'email';
                break;
            default:;
        } // switch
    } // ff_email_init

Enregistrez les propriétés du champ et enregistrez le formulaire avant de contrôler le code html du champ E-Mail qui est devenu de type email.

Nous pouvons voir que le "type" a bien été modifié. Notre champ devra désormais recevoir un contenu ayant la syntaxe xxx@xxx.xxx. Si tel n'est pas le cas, il nous devient possible de formater le champ afin de le présenter avec une bordure rouge, un fond rouge ou tout ce que vous souhaitez pour mettre le champ en évidence et porter l'attention de l'utilisateur sur ce même champ…

Mise en évidence du champ invalide

Ouvrez le fichier css de votre template de formulaire selon le chemin ftp suivant :
site/media/breezingforms/themes/NomDeVotreThème/theme.css

En fin de fichier, saisissez vos déclarations css pour le groupe de sélecteurs .bfQuickMode input:invalid { }, par exemple comme ceci :

.bfQuickMode input:invalid {
	border-color: red;
}

Vous pouvez, si le cœur vous en dit, formater un champ valide d'une bordure verte.

.bfQuickMode input:valid {
        border-color: green;
}

Gardez à l'esprit qu'un champ vide n'étant pas invalide, il prendra la mise en forme des éléments valides et donc aussi la bordure verte…

Enregistrez votre fichier CSS et renvoyez-le sur le FTP et testez votre champ de formulaire E-Mail en y entrant ce que vous souhaitez sauf une adresse e-mail.

Il se peut que vous ayez à adapter les dimensions des input de type email, url et tel dans vos fichiers css pour les adapter à votre design.

fildtype 03

Autres types de champs "text"

Afin de modifier votre champ URL du type text vers type url, il suffit d'appliquer la méthode suscitée en adaptant le type au champ.

function ff_url_init(element, condition) { 
        switch (condition) {
               case 'formentry':
                      element.type = 'url';
        break;
default:; } // switch } // ff_url_init

Voyez le résultat du champ URL.

fieldtype 04

Pour le champ Téléphone, nous renseignerons, simplement et identiquement aux changements précédents, "tel" comme type de champ.

Contrairement aux contrôles utilisés pour les champs <input type="email"> et <input type="url">, la valeur saisie n'est pas automatiquement validée selon un format donné car les formats des numéros de téléphone varient selon les pays.
Il est cependant possible, si vous le nécessitez, de forcer un format à l'aide de l'attribut "pattern" et d'expressions régulières à base de méta-caractères. Ci-après, je vous montre comment forcer un numéro de téléphone de type international composé comme suit : +33 (0)6 12345678 (les espaces dans la saisie sont optionnels).

function ff_phone_init(element, condition)
{
    switch (condition) {
        case 'formentry':

    element.type= 'tel';
    element.pattern = '\\+\\d{2,3}\\s?\\(0\\)\\d\\s?\\d{8}$';

            break;
        default:;
    } // switch
} // ff_phone_init

Voici le résultat de validation du pattern qui rend du même coup le champ formatable comme les précédents.

fieldtype 05

Le pattern permet de forcer la syntaxe de n'importe quel champ de type text (originairement, type='email", type="url" sont également des champs de type text).

Conclusion

Nous voyons qu'avec un tout petit peu de JavaScript nous pouvons modifier le type de champs et profiter des pseudo-classes CSS :invalid et éventuellement :valid afin d'apporter une touche de "mise en garde" sur des champs que l'utilisateur renseignerait de manière différente à ce qui est attendu.

Attention

Dans un formulaire classique, si la saisie inadaptée d'un champ de type email, URL empêche la validation du formulaire, il n'en va pas de même pour les formulaires BreezingForms, le composant ayant son propre procédé de validation, il est indispensable d'utiliser les scripts de validation tels que décrits dans ce tutoriel.

Toutes ces options ne vérifient que le format et la cohérence des données renseignées par l'utilisateur, jamais leur exactitude !

Exemple

Ci-dessous, vous pouvez tester les champs mis en forme.

Les scripts peuvent également être saisis dans la partie Script d'initialisation des propriétés avancées du formulaire → plus d'options.
Il sera alors indispensable de cibler les éléments par leur nom de la manière suivante après y avoir créé le code Framework :

ff_getElementByName('NomDeChamp').type = 'typeDeChamp';

6 commentaires

    • Bonjour Jimmy.

      Un simple champ de texte avec un pattern suffirait. Il suffit d'adapter un pattern avec une regex.
      p. ex. ceci permettrait de formater un champ de 10 chiffres à la suite les uns des autres :

      element.pattern = '^\\d{10}$';

      Mais il est également possible de créer un script de validation qui serait alors disponible dans la bibliothèque. Il serait utile pour valider le champ s'il est correctement formaté. Si une erreur de saisie est commise, le formulaire serait invalidé demandant alors la correction dudit champ.

      • Citation en provenance du commentaire précédent de Eddy :

        Bonjour Jimmy.

        Un simple champ de texte avec un pattern suffirait. Il suffit d'adapter un pattern avec une regex.
        p. ex. ceci permettrait de formater un champ de 10 chiffres à la suite les uns des autres :

        element.pattern = '^\\d{10}$';

        Mais il est également possible de créer un script de validation qui serait alors disponible dans la bibliothèque. Il serait utile pour valider le champ s'il est correctement formaté. Si une erreur de saisie est commise, le formulaire serait invalidé demandant alors la correction dudit champ.

        Un script serait plus adapté car, actuellement si un internaute tape 06.12.13.14.45 ou 06-12-13-14-45 ou 06 12 13 14 45, ça n'est pas pris en compte : il faut écrire 06121345678

        • Bonjour.

          Pour recevoir un formatage de 5 x 2 chiffres dont les 4 premiers groupes sont suivis d'un point, il faut utiliser le masque de saisie à l'aide de l'insertion d'un JavaScript en suivant ce tutoriel.
          Le javascript n'étant plus compatible, le tutoriel a été abandonné.

          Pour le code postal à 5 chiffres, qu'il soit français ou autre, la solution est donnée ci-dessus dans ma réponse à Jimmy, il suffit d'y remplacer 10 par 5…

Connectez-vous pour poster un commentaire

Afin d'éviter les messages indésirables, les commentaires sont réservés aux membres inscrits. Veuillez vous inscrire ou vous connecter pour publier votre commentaire

FAIRE UN DON

paypal btn

Via PayPal

PLUGIN UP DE LOMART

Universal Plugin : UP

De très nombreuses actions pour vos articles en un unique plugin.
up lomart