Création de remplacements de bulles de validation de formulaire HTML5

J'ai écrit et sur au sujet de la validation de formulaires au cours des dernières années au format HTML5, et l'une des questions les plus courantes que je reçois concerne les bulles. Par bulles, j'entends les contrôles de l'interface utilisateur dans lesquels les navigateurs affichent des erreurs de validation. Vous pouvez voir ci-dessous les implémentations de Chrome, Firefox et IE:

Quelle que soit la raison, nos développeurs (ou plus probablement nos collègues concepteurs) ont Assis désir de coiffer ces choses. Mais malheureusement, nous ne pouvons pas, car aucun navigateur ne fournit de crochets de style qui ciblent ces bulles. Chrome utilisé pour fournir une série de pseudo-éléments préfixés par le fournisseur ( :: - webkit-validation-bubble - * ), mais ont été supprimés. dans Chrome 28 .

Alors, que doit faire un développeur? Bien que les navigateurs ne vous autorisent pas à personnaliser leurs bulles, la spécification de validation de contrainte vous permet de supprimer l'interface utilisateur de la bulle du navigateur et de créer la vôtre. Le reste de l’article vous montre comment faire exactement cela.

Avertissement: Ne vous engagez pas dans la construction d’un remplacement de bulle. Avec les bulles par défaut, vous obtenez gratuitement des fonctionnalités assez complexes, telles que le positionnement et l'accessibilité. Avec les bulles personnalisées, vous devez résoudre vous-même ces problèmes (ou utiliser une bibliothèque qui le fait).

Suppression des bulles par défaut

La ​​première étape de la création d'une interface utilisateur personnalisée consiste à supprimer les bulles natives. Vous faites cela en écoutant l'événement invalide de chaque contrôle de formulaire et en empêchant son comportement par défaut. Par exemple, le formulaire suivant n'utilise pas de bulles de validation en raison de l'appel event.preventDefault () dans le gestionnaire d'événements invalide .

    
     Submit 
 

L'événement invalide ne bouillonne pas (sans jeu de mots), donc si vous voulez empêcher les bulles de validation sur plusieurs éléments, vous devez associer un écouteur en phase de capture.

Si vous êtes confus. sur la différence entre les phases de bouillonnement et de capture des événements DOM, consultez cet article de MDN pour une assez bonne explication.

Le code suivant empêche les bulles sur les deux entrées avec un seul invalide . ] écouteur d'événement sur l'élément parent

    
    
     Submit 
 

Vous pouvez utiliser cette approche pour supprimer l'interface utilisateur du navigateur afin de valider le formulaire, mais vous avez ainsi créé quelque chose de personnalisé pour le remplacer.

Création d'interfaces utilisateur alternatives

Il existe d'innombrables façons d'afficher les erreurs de validation de formulaire. et aucun d’entre eux n’est nécessairement juste ou faux. (D'accord, il y a quelques fausses fausses façons de faire cela.) Voyons quelques approches courantes que vous pourriez vouloir adopter. Pour chacun, nous utiliserons le formulaire très simple de nom et d’adresse électronique ci-dessous. Nous allons également utiliser quelques CSS simples pour donner à ce formulaire un aspect légèrement décent.

    

         Nom: 
        
    
    

         E-mail: 
        
    
    

         Submit 
    

Avant de commencer, il est important de noter que toutes ces interfaces ne fonctionnent que dans Internet Explorer. à partir de la version 10, l’API de validation des contraintes n’est pas disponible dans les versions antérieures. Si vous devez prendre en charge l'ancien IE et que vous souhaitez toujours utiliser la validation de formulaire au format HTML5, consultez ce diaporama dans lequel je présente certaines options.

Interface utilisateur alternative n ° 1: liste de messages [19659024] Une manière courante de montrer les erreurs de validation consiste à placer une zone en haut de l'écran. Ce comportement est relativement facile à générer avec les API de validation de formulaire HTML5. Avant d'entrer dans le code, voici à quoi il ressemble en action:

Voici le code dont vous avez besoin pour construire cette interface utilisateur:

 function replaceValidationUI (form) {
    // Supprime les bulles par défaut
    form.addEventListener ("invalid", fonction (événement) {
        event.preventDefault ();
    }, vrai );

    // Prise en charge de Safari, iOS Safari et du navigateur Android - chacun n'empêchant pas
    // forme les soumissions par défaut
    form.addEventListener ("submit", fonction (événement) {
        if (! this.checkValidity ()) {
            event.preventDefault ();
        }
    });

    // Ajouter un conteneur pour contenir des messages d'erreur
    form.insertAdjacentHTML ("afterbegin", "
");

    var submitButton = form.querySelector ("bouton: non ([type=button]), entrée [type=submit]");
    submitButton.addEventListener ("click", fonction (événement) {
        var invalidFields = form.querySelectorAll (": invalid"),
            listHtml = "",
            errorMessages = form.querySelector (".error-messages"),
            étiquette;

        pour (var i = 0; i <invalidFields.length; i ++) {
            label = form.querySelector ("label [for=" + invalidFields[ i ] .id +"] ");
            listHtml + = "
" +
                label.innerHTML +
                "" +
                invalidFields [ i ] .validationMessage +
                "
";
        }

        // met à jour la liste avec les nouveaux messages d'erreur
        errorMessages.innerHTML = listHtml;

        // S'il y a des erreurs, donne le focus sur le premier champ invalide et montre
        // le conteneur de messages d'erreur
        if (invalidFields.length> 0) {
            invalidFields [ 0 ] .focus ();
            errorMessages.style.display = "block";
        }
    });
}

// Remplace l'interface utilisateur de validation pour tous les formulaires
var formes = document.querySelectorAll ("formulaire");
pour (var i = 0; i <forms.length; i ++) {
    replaceValidationUI (formulaires [ i ]);
} 

Cet exemple suppose que chaque champ de formulaire a un correspondant, où l'attribut id du champ de formulaire correspond à l'attribut pour de . Vous voudrez peut-être modifier le code qui construit les messages eux-mêmes pour qu'ils correspondent à vos applications, mais cela ne devrait pas être quelque chose de simple.

UI alternative n ° 2: Messages sous les champs

Parfois, au lieu d'afficher un liste des messages en haut de l’écran auquel vous souhaitez associer un message avec son champ correspondant. Voici une interface utilisateur qui fait cela:

Pour construire cette interface utilisateur, la plupart du code reste identique à la première approche, avec quelques différences subtiles dans le gestionnaire d'événements du bouton de soumission click .

 function replaceValidationUI (formulaire) {
    // Supprime les bulles par défaut
    form.addEventListener ("invalid", fonction (événement) {
        event.preventDefault ();
    }, vrai );

    // Prise en charge de Safari, iOS Safari et du navigateur Android - chacun n'empêchant pas
    // forme les soumissions par défaut
    form.addEventListener ("submit", fonction (événement) {
        if (! this.checkValidity ()) {
            event.preventDefault ();
        }
    });

    var submitButton = form.querySelector ("bouton: non ([type=button]), entrée [type=submit]");
    submitButton.addEventListener ("click", fonction (événement) {
        var invalidFields = form.querySelectorAll (": invalid"),
            errorMessages = form.querySelectorAll (".error-message"),
            parent;

        // Supprimer tous les messages existants
        pour (var i = 0; i <errorMessages.length; i ++) {
            errorMessages [ i ] .parentNode.removeChild (errorMessages [ i ]);
        }

        pour (var i = 0; i <invalidFields.length; i ++) {
            parent = invalidFields [ i ] .parentNode;
            parent.insertAdjacentHTML ("beforeend", "
" +
                invalidFields [ i ] .validationMessage +
                "
");
        }

        // S'il y a des erreurs, donne le focus sur le premier champ invalide
        if (invalidFields.length> 0) {
            invalidFields [ 0 ] .focus ();
        }
    });
}

// Remplace l'interface utilisateur de validation pour tous les formulaires
var formes = document.querySelectorAll ("formulaire");
pour (var i = 0; i <forms.length; i ++) {
    replaceValidationUI (formulaires [ i ]);
} 

Interface utilisateur alternative n ° 3: Bulles de remplacement

La dernière interface utilisateur que je vais vous présenter permet d'imiter la bulle de validation du navigateur à l'aide d'une bulle entièrement personnalisée (et stylable) construite avec JavaScript. Voici l'implémentation en action:

Dans cet exemple, j'utilise une info-bulle Kendo UI car je ne veux pas m'inquiéter de la gestion de la logique de positionnement des bulles. Le code que j'utilise pour construire cette interface utilisateur est ci-dessous. Pour cette implémentation, j'ai choisi d'utiliser jQuery pour nettoyer le code DOM (car l'interface utilisateur de Kendo dépend de jQuery).

 $ ("form") .each (function () {
    forme var = ceci;

    // Supprime les bulles par défaut
    form.addEventListener ("invalid", fonction (événement) {
        event.preventDefault ();
    }, vrai );

    // Prise en charge de Safari, iOS Safari et du navigateur Android - chacun n'empêchant pas
    // forme les soumissions par défaut
    $ (formulaire) .on ("submit", fonction (événement) {
        if (! this.checkValidity ()) {
            event.preventDefault ();
        }
    });

    $ ("input, select, textarea", formulaire)
        // Détruit l'info-bulle sur le flou si le champ contient des données valides
        .on ("flou", fonction () {
            champ var = $ (this);
            if (field.data ("kendoTooltip")) {
                if (this.validity.valid) {
                    field.kendoTooltip ("détruire");
                } autre {
                    field.kendoTooltip ("masquer");
                }
            }
        })
        // Afficher l'info-bulle sur le focus
        .on ("focus", function () {
            champ var = $ (this);
            if (field.data ("kendoTooltip")) {
                field.kendoTooltip ("show");
            }
        });

    $ ("bouton: pas ([type=button]), entrée [type=submit]", formulaire) .on ("clic", fonction (événement) {
        // Détruit les info-bulles des exécutions précédentes
        $ ("input, select, textarea", form) .each (function () {
            champ var = $ (this);
            if (field.data ("kendoTooltip")) {
                field.kendoTooltip ("détruire");
            }
        });

        // Ajouter une info-bulle à chaque champ invalide
        var invalidFields = $ (": invalid", formulaire) .each (function () {
            champ var = $ (this) .kendoTooltip ({
                contenu: fonction () {
                    champ de retour [ 0 ] .validationMessage;
                }
            });
        });

        // S'il y a des erreurs, donne le focus sur le premier champ invalide
        invalidFields.first (). trigger ("focus") .eq (0) .focus ();
    });
}); 

Bien que le remplacement des bulles de validation nécessite une quantité regrettable de code, cela revient à reproduire assez bien l’implémentation du navigateur. La différence étant que l'implémentation de JavaScript est beaucoup plus personnalisable, car vous pouvez la modifier à votre guise. Par exemple, si vous avez besoin d'ajouter du rose, du vert et du Comic Sans à vos bulles, vous totalement pouvez maintenant:

Le widget info-bulle de Kendo UI est l'un des 25+ widgets disponibles dans . ] Kendo UI Core la distribution libre et open source de Kendo UI. Vous pouvez donc utiliser ce code aujourd'hui sans vous soucier des restrictions de licence – ni payer de l'argent. Vous pouvez télécharger directement la source principale de Kendo UI avec notre CDN ou vous procurer la bibliothèque à partir de Bower ( pour installer kendo-ui-core ).

] Conclusion

Bien que vous ne puissiez pas attribuer de style aux bulles de validation du navigateur, vous pouvez les supprimer et créer l'interface utilisateur de votre choix. N'hésitez pas à essayer de modifier les approches présentées dans cet article pour répondre à vos besoins. Si vous avez d'autres approches que vous avez utilisées dans le passé, n'hésitez pas à les partager dans les commentaires.