Utiliser les formulaires

1. L’utilisation de librairies tierces

Maintenant que nous avons vu les fondamentaux du framework et l’ensemble des directives, nous allons voir comment construire un formulaire de contact sur une page.

Afin que le rendu soit plus joli, vous pouvez réutiliser les classes CSS de votre projet existant. Pour un nouveau projet, il est conseillé d’utiliser des librairies de composants graphiques qui mettent à disposition du code CSS et des composants réactifs prêts à l’emploi. Il est ainsi possible de construire des pages responsives avec un design looké sans compétences poussées en web design.

Il existe plusieurs librairies graphiques. Voici une liste des librairies les plus populaires.

1. Champs date

Ajoutons maintenant un champ Date de naissance à notre formulaire. Nous utiliserons le pattern suivant : jj/mm/aaaa. Nous ajoutons donc la donnée dateNaissance dans notre modèle et un élément <input> de type date dans notre formulaire.

<label> 
  Date de naissance : 
  <input type="date" v-model="dateNaissance"/> 
</label> 

Résultat :

On s’aperçoit que l’on peut sélectionner une date de naissance inférieure à 1900 et supérieure à la date du jour. Cela serait donc plus logique de borner la plage de date avec l’attribut min au 01/01/1900 et l’attribut max à la date du jour. Ces champs prennent des dates au format américain aaaa-mm-dd. Nous pouvons remplir en dur la valeur de l’attribut min, mais l’attribut max doit s’actualiser en fonction de la date du jour. À la création de l’instance, nous allons donc formater une donnée dateDuJour dans notre modèle.

Nous ajoutons donc dans le hook created de notre instance le code suivant :

created() { 
  let now = new Date(); 
  let jour   = ('0'+now.getDate()).slice(-2); 
  let mois  = ('0'+ (now.getMonth()+1)).slice(-2); 
  let annee = now.getFullYear(); 
  this.dateDuJour = `${annee}-${mois}-${jour}`; 
}, 
data { 
  // autres propriétés 
  dateDuJour: '', 
} 

Dans notre template, on aura :

<label> 
  Date de naissance : 
  <input  
    type="date" 
    placeholder="jj/mm/aaaa" 
    min="1900-01-01" 
    :max="dateDuJour" 
    v-model="dateNaissance" 
  /> ...

1. Formater une saisie en tant que nombre

Par défaut, la directive v-model transmet ou retourne une chaîne de caractères depuis le modèle. Il est possible d’utiliser le modificateur .number qui convertit automatiquement la saisie en interne avec la fonction JavaScript parseFloat(). Si cette conversion n’est pas possible, alors la donnée du modèle prendra pour valeur une chaîne vide.

Nous ajoutons une donnée taille dans le modèle et le code HTML suivant dans le template :

<label> 
  Taille: 
  <input type="number" v-model.number="taille"/> 
  mètres 
</label> 

Résultat :

Les virgules sont également converties en un point sur ce type de champ.

2. Réagir sur l’évènement change plutôt qu’input

Par défaut, pour un champ de type text, la directive v-model change la valeur de la donnée du modèle à laquelle elle est liée à chaque évènement input, c’est-à-dire que la donnée est mise à jour à chaque caractère tapé. Il est possible de changer ce comportement pour que la mise à jour de la donnée soit appliquée une fois que l’on quitte le champ sur l’évènement...

1. Les librairies de validations de formulaire

La validation de formulaire est toujours un sujet difficile pour les développements frontend. On peut avoir besoin d’appliquer plusieurs règles de validation sur un champ de saisie pour que cette dernière respecte un format particulier ou certaines valeurs en fonction de règles métier.

Avec Vue.js, deux librairies de validation sont très populaires.

2. Utiliser VeeValidate

<script src="https://unpkg.com/vee-validate@latest"></script> 

<script src="chemin/vee-validate.js"></script> 

npm install vee-validate --save 
 
yarn add vee-validate 

Vue.component('validation-provider', VeeValidate.ValidationProvider); 

import Vue from 'vue'; 
import { ValidationProvider, extend } from 'vee-validate'; 
 
Vue.component('ValidationProvider', ValidationProvider); 

<validation-provider rules="regle1|regle2"...