Je mets ma main à couper, que 95% de vos formulaires fais avec VueJS ressemblent à ça :

<div class="form">
    <label for="email">Email *</label>
    <input type="email" id="email" v-model="email" />
    <label for="password">Password *</label>
    <input type="password" id="password" v-model="password" />
    <p v-if="error">{{ error }}</p>
    <button @click="send()">Envoyer</button>
</div>

Bien sûr, peut-être que vous utilisez une bibliothèque pour générer et styliser vos <input>, et donc votre formulaire est légèrement différent, mais une vraie erreur de conception se cache derrière ce formulaire...

Cette erreur, c'est qu'il ne s'agit pas d'un formulaire !

Pourquoi utiliser un élément <form> ?

Avec les frameworks front modernes et l'utilisation de requêtes HTTP asynchrones (ajax), l'élément <form> est apparu pour beaucoup comme complètement inutile, car il ne servait qu'à envoyer les informations de manière synchrone au serveur.

Mais c'est faux !

En réalité, de nombreuses fonctionnalités natives du web sont possibles grâce à l'utilisation des formulaires HTML, ce qui améliore grandement l'expérience utilisateur, l'accessibilité, mais également l'expérience de développement !

Par exemple, en utilisant un élément <form>, on peut :

• Utiliser l'attribut natif "required" pour indiquer qu'un champ est requis et donc bloquer l'envoi du formulaire sans rajouter de JavaScript
• Uutiliser l'attribut "pattern" pour valider le champ avec une RegEx,  (mais également "minlength" et "maxlength")
• Envoyer le formulaire automatiquement lors de l'appui sur la touche "Entrée"
• Indique sémantiquement au navigateur que tous les champs font partie du même formulaire, pour faciliter la tâche aux outils d'aide à l'accessibilité

Il y a sûrement d'autres avantages, si jamais vous en avez, n'hésitez pas à nous les envoyer !

La bonne pratique

La meilleure pratique est donc d'utiliser un <form> et d'écouter l'évènement natif "submit" :

<form @submit="send()">
    <label for="email">Email *</label>
    <input 
           type="email" 
           pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" 
           id="email" 
           v-model="email" 
    />
    <label for="password">Password *</label>
    <input 
           type="password" 
           minlength="8" 
           id="password" 
           v-model="password" 
    />
    <button type="submit">Envoyer</button>
</div>

<script>
export default {
    setup(){
        function send(ev){
            //Empèche le formulaire de recharger la page
            ev.preventDefault();
            // Le code de votre requête vient ici
            //...
        }
    }
}
</script>

Alors comment ça marche ?

Si vous n'êtes pas habitué.e à utiliser les formulaires, certaines choses peuvent vous paraitre étrange dans le code ci-dessus, alors voici quelques explications :

D'abord, un <form> sans attribut [action="..."] rechargera la page courant lors de l'envoi, il faut donc appeler la méthode ev.preventDefault() lors de l'envoi du formulaire pour éviter le rechargement de la page.

Pour finir, il faut savoir que le formulaire sera envoyé automatiquement si un élément <button type="submit"> est présent et qu'il est cliqué, même s'il n'est lié à aucun évènement.

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi formateur/coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !

Photo de CHUTTERSNAP sur Unsplash