Le contrôle de saisie d'un formulaire côté navigateur doit être vu comme une aide à l'utilisateur pour le guider dans le remplissage de son formulaire, pour lui faire gagner du temps et lui éviter des erreurs de saisie. Le but est bien d'augmenter le taux de transformation de vos formulaires en limitant la frustration, les abandons ou les saisies inexploitables.
Attention, le contrôle de saisie en JavaScript ne garantit aucunement que les données envoyées dans le formulaire vers le serveur sont valides. Un utilisateur malintentionné peut envoyer au serveur toutes les données qu'il souhaite, même des données non prévues dans le formulaire d'origine. Il est impératif de vérifier la saisie à la soumission du formulaire sur le serveur. Voir le tuto Traiter un formulaire avec PHP.
En gardant à l'esprit l'objectif d'assistance à l'utilisateur pendant sa saisie, la question du contrôle de saisie ne peut être séparée de son efficacité et de son ergonomie.
Avec la multiplication des typologies d'appareils disponibles, l'affichage des indications et des erreurs de saisies doit être parfaitement réfléchi.
Avec l'immensité des choix de sites offerts aux utilisateurs, l'efficacité prime sur l'originalité.
Il existe de nombreux modules tout faits et à intégrer avec une seule ligne de code, en particulier en jQuery qui rendent le travail de contrôle très simple. Nous allons voir ici les grands principes qui s'appliquent à ces systèmes.
La première manière de fiabiliser une saisie et d'éviter les erreurs est de donner la bonne information à l'utilisateur.
Donnez des indications sur ce qui est attendu, en utilisant les possibilités du HTML comme l'attribut placeholder qui renseigne une saisie d'exemple dans le champ :
<input type="email" placeholder="mail@serveur.com">
qui affichera :
Facilitez le clic sur une case à cocher en utilisant la balise <label> avec l'attribut for qui s'attache à l'élément de même id
<input type="checkbox" id="case"><label for="case">Je suis d'accord<label>
qui permet de cocher ou décocher la case en cliquant sur le libellé et pas seulement sur la case input qui impose de viser une toute petite zone de quelques pixels de dimension :
Utilisez les bons types de champs texte (tel, url, email, password) pour indiquer au navigateur ce qui est attendu. C'est particulièrement utile sur les smartphones pour présenter à l'utilisateur le clavier correspondant à la saisie à réaliser.
Utilisez les bons noms de champ pour profiter de l'auto remplissage des valeurs par le navigateur, afin de faire gagner du temps à votre utilisateur.
Bien sûr une présentation claire, avec les bons libellés et un ordre logique incitera l'utilisateur à remplir complètement son formulaire. C'est particulièrement vrai dans le cas d'un mot de passe où il est indispensable de définir à l'avance et clairement les contraintes de longueur et de caractères à intégrer.
Empêcher les copier coller dans les champs de double vérification. Si vous avez besoin de confirmer un mail par une double saisie, interdisez le copier-coller en détectant les événement oncut, onpaste et oncopy :
<input type="email" name="verif" oncopy="return false" onpaste="return false" oncut="return false">Le
return false dans l'événement l'interrompt et empêche l'action prévue de s'effectuer.
Pensez utilisateur ! Vous avez forcément été confronté vous-même à des formulaires fastidieux. Ne répétez pas les mêmes erreurs et inspirez-vous des bonnes idées que vous rencontrez.
Certains navigateurs récents ont implémenté chacun à leur niveau des fonctionnalités internes de contrôle de saisie sur les formulaires. Une couche supplémentaire codé par le site permet de fiabiliser les saisies à un niveau commun.
Chaque navigateur utilise sa propre interface pour l'affichage des messages qu'il n'est pas possible de modifier.
Préparons un formulaire qui utilise les principaux contrôles du navigateur pour demander à l'utilisateur quelle contribution il est prêt à accorder :
<form name="monFormulaire" id="monFormulaire" method="post" onsubmit="return false">
<div>
<label class="label">Votre pseudo :</label>
<input class="controle" type="text" name="pseudo" required pattern="[0-9a-zA-Z-\.]{3,12}" placeholder="De 3 à 12 caractères">
<span class="resultat"></span>
</div>
<div>
<label class="label">Votre mail :</label>
<input class="controle" type="email" name="mail" required placeholder="mail@serveur.com">
<span class="resultat"></span>
</div>
<div>
<label class="label">Votre contribution :</label>
<input class="controle" type="number" name="contribution" min="0" max="10" required placeholder="Entre 1 et 10">
<span class="resultat"></span>
</div>
<div>
<label class="label">Votre date de venue :</label>
<input class="controle" type="date" name="venue" required>
<span class="resultat"></span>
</div>
<div>
<input type="submit" value="Envoyer">
</div>
</form>
La partie CSS :
input.controle {
outline:0;
font-size:14px;
width:250px;
}
label.label {
display:inline-block;
width:200px;
text-align: right;
font-style: italic;
margin-right:5px;
}
input.controle:valid {
border:3px solid #0a0;
}
input.controle:invalid {
border:3px solid #a00;
}
input.controle:valid + span:before {
content: "\f00c";
font-family: "FontAwesome";
color:#0a0;
font-size: 1.5em;
}
input.controle:invalid + span:before {
content: "\f00d";
font-family: "FontAwesome";
color:#a00;
font-size: 1.5em;
}
Ce qui donne notre formulaire :
Ces contrôles associés à des propriétés CSS judicieusement choisies, donnent des indications à l'utilisateur en temps réel pendant sa saisie.
Les pseudos-class CSS :valid et :invalid permettent de modifier l'apparence des champs de saisie selon la validité du contenu des champs.
Le code couleur rouge/vert est universel pour indiquer si un état est correct ou non. Ce choix de couleur étrange quand environ 10% de la population est daltonienne oblige à ajouter des pictos pour renforcer la compréhension.
Les pictos sont ajoutés par le sélecteur input.controle:valid + span:before qui repère l'élément span qui suit le champ à contrôler et lui ajoute le contenu content.
Grâce à la police de pictogramme Font Awesome, on peut ajouter le symbole pour les zones mal renseignées et pour les champs valides.
La propriété required indique que la saisie du champ est obligatoire.
La propriété pattern contient le motif de l'expression régulière RegExp destinée à contrôler la saisie.
Les propriétés min et max composent la tranche de valeurs autorisées pour le champ.
Retenons que ce contrôle par le navigateur est un moyen simple de proposer un premier niveau de vérification de la saisie. Avec des styles CSS appropriés, il est possible de réaliser un formulaire efficace.
Le principal reproche qu'on peut faire à ce système est que le navigateur affiche tous les champs en erreur avant même que la saisie ne commence. Le résultat est plutôt anxyogène pour un utilisateur peut averti.
De manière générale, la puissance du CSS est parfois largement préférable à l'utilisation du JavaScript. C'est particulièrement vrai pour les effets d'animation créés par CSS qui sont optimisés par le navigateur en fonction de l'appareil utilisé, en profitant par exemple des ressources des co-processeurs graphiques intégrés.
Lors soumission du formulaire, des messages en surimpression, formatés par le navigateurs, apparaissent en complément.
Le JavaScript permet de contrôler la saisie au fur et à mesure de la frappe et de l'avancée du formulaire.
Il est préférable d'indiquer en temps réel si une erreur est détectée plutôt que de faire une liste de toutes les erreurs sur le bouton de validation.
EN COURS DE FINALISATION DE REDACTION
Lors de la soumission du formulaire, sur l'événement onsubmit, il faut détecter la conformité de l'ensemble des données. Si les données sont valides, l'événement aboutit et déclenche l'envoi du formulaire. Sinon, le visiteur reste sur la page et il est invité à corriger ses erreurs.
L'événement onsubmit est intercepté par sa fonction JavaScript. Si la fonction retourne true, l'événement continue sa progression naturelle. Si la fonction retourne false, l'événement est stoppé.
En savoir plus