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.

Vous avez trouvé cet article intéressant ?
N'hésitez pas à l'évaluer en haut de page Je vous en remercie d'avance.

 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.