Les événements dans les formulaires : valider et améliorer l’UX

Les formulaires sont un élément clé de l'interaction utilisateur sur le web. Bien gérer leurs événements permet non seulement d'assurer une validation efficace mais aussi d'améliorer l'expérience utilisateur (UX). Voici un tour d'horizon des événements les plus utiles et des bonnes pratiques pour les exploiter !

Les principaux événements des formulaires

`input`

L'événement input est déclenché à chaque modification de la valeur d'un champ (champ texte, textarea, etc.). Il est idéal pour fournir un feedback en temps réel.

const inputField = document.querySelector("#username")
inputField.addEventListener("input", (event) => {
    console.log("Nouvelle valeur :", event.target.value)
})

`change`

Cet événement se déclenche lorsque la valeur d'un champ change et que l'utilisateur quitte le champ ou valide la saisie (appui sur la touche "Entrée" ou clic).

const selectField = document.querySelector("#country")
selectField.addEventListener("change", (event) => {
    console.log("Pays sélectionné :", event.target.value)
})

`focus` et `blur`

L'événement focus est activé quand un champ reçoit le focus, et blur quand il le perd. Cela permet de vérifier la saisie, d'afficher des conseils à l'utilisateur ou encore de modifier le style pour rendre le formulaire plus accessible.

   emailField.addEventListener("focus", () => {
    console.log("Champ email sélectionné")
})

emailField.addEventListener("blur", () => {
    if (emailField.value.length > 3 && !emailField.value.includes("@")) {
        errorMsg.textContent = "L’email semble incorrect."
    } else {   
        errorMsg.textContent = ""
}
})

`submit`

L'événement submit quant à lui permet d'intercepter l'envoi du formulaire pour effectuer une validation avant soumission.

form.addEventListener("submit", (event) => {
   event.preventDefault()
   console.log("Formulaire soumis avec succès !")
})

Améliorer l'UX grâce aux événements

La validation en temps réel

Un bon formulaire est réactif et guide l'utilisateur tout du long. Il doit par exemple, pouvoir afficher un message d'erreur si l'email est mal formaté.

Ce processus, peut (et doit) être répliqué sur chaque champ complexe du formulaire afin d'en tirer tous ses avantages (gain de temps, réduction des erreurs et une meilleure compréhension).

Comment rendre la validation plus efficace ?

✅ Messages d'erreur précis : Indiquer clairement ce qui est attendu.
✅ Mise en évidence des champs erronés : Ajouter une bordure rouge ou un icône d'avertissement.
✅ Feedback positif : Afficher une confirmation visuelle quand la saisie est correcte.

emailInput.addEventListener("input", (event) => {
    const value = event.target.value
    if (!value.includes("@")) {
        errorMsg.textContent = "L'email doit contenir un @"
    } else {
        errorMsg.textContent = ""
    }
})

Autofocus et mise en avant des champs

Mettre automatiquement le focus sur le premier champ améliore l'accessibilité et permet également de capter l'utilisateur vers l'essentiel.

document.querySelector("#username").focus()

Désactivation du bouton de soumission

Inutile de rendre disponible (cliquable) le bouton de soumission tant que le formulaire n'est pas correctement rempli. On va préférer le désactiver ce qui modifie le visuel du bouton et rend encore une fois la compréhension meilleure pour l'utilisateur.

submitBtn = document.querySelector("#submit")
submitBtn.disabled = true

document.querySelector("#username").addEventListener("input", (event) => {
    submitBtn.disabled = event.target.value.length < 3
})

Empêcher l'envoi avec `preventDefault()`

Comme vu plus haut, l'événement submit intercepte la soumission d'un formulaire. Grâce à preventDefault(), on empêche son envoi si certains champs ne sont pas remplis correctement (c'est un indispensable pour éviter les erreurs à l'envoi du formulaire).

const form = document.querySelector("#myForm")
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

form.addEventListener("submit", (event) => {
    if (emailInput.value.trim() === "" || !emailRegex.test(value)) {
        errorMsg.textContent = "Veuillez entrer un email valide."
        event.preventDefault() //empêche l'envoi du formulaire
    } else {
        console.log("Formulaire soumis avec succès !")
    }
})

Et Voilà comment améliorer l'UX en exploitant au mieux les événements. Les formulaires respectant ces guidelines sont plus fluides et interactifs ! Cela facilite la saisie et réduit les erreurs.

⭐ Bonus

⭐ CodePen lié à l'article:
CodePen: Apprendre les événements dans les formulaires (JavaScript)

MandyTrl @mdytrl