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.

Niveau: Facile
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 l'ftp et testez votre champs 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 champs URL du type text vers type url, il suffit d'appliquer la méthode sus-cité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 champs 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-classe 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 champs 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 quel 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';

Pour en savoir plus sur les expressions régulières, je vous invite à lire cet article.

Cet article vous a plu ?
N'hésitez pas à laisser une évaluation en haut de page afin de me faire part de votre impression !

 Commentaires  
jimmy
0#i,ntéréssantjimmy09-10-2019 14:42
Intéressant mais j'aimerais uniquement forcer 10 chiffres avec espace, ou point ou tiret ou coller sans le +33 devant ;-)
Répondre | Répondre en citant | Citer
Eddy
0#RE: Formatage de champs (in)valides à l'aide de Javascript et CSS3Eddy10-10-2019 10:30
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 du dit champ.
Répondre | Répondre en citant | Citer
jimmy
0#RE: Formatage de champs (in)valides à l'aide de Javascript et CSS3jimmy10-10-2019 14:33
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 du dit 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
Répondre | Répondre en citant | Citer
Eddy
0#RE: Formatage de champs (in)valides à l'aide de Javascript et CSS3Eddy10-10-2019 15:04
Jimmy.

Si vous m'expliquez exactement le type de formatage souhaité, je peux éventuellement vous proposer un script personnalisé.
Répondre | Répondre en citant | Citer
 Ajouter un commentaire
En utilisant ce formulaire de commentaires, vous acceptez que les informations demandées soient enregistrées, affichées ci-dessous et utilisées pour un éventuel contact (dans ce cas, n'oubliez pas de renseigner votre e-mail). L'adresse e-mail n'est jamais affichée aux visiteurs.