La mauvaise pratique à bannir dans vos formulaires VueJS

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

?

Avec les frameworks front modernes et l'utilisation de requêtes HTTP asynchrones (ajax), l'élément 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 , 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 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 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 est présent et qu'il est cliqué, même s'il n'est lié à aucun évènement.