La validation de formulaires dans VueJs

La validation de formulaires dans VueJs peut se faire manuellement sans rien ajouter à vue ou via des librairies existantes.

Dans cet article, nous verrons comment faire la validation manuelle (sans librairie). Un prochain article parlera de la validation via la librairie vuelidate (libre à vous de choisir d’autres librairies pour faire cette opération mais vous aurez déjà les bases).

Validation manuelle

Pour valider manuellement un formulaire, la première opération est de créer un formulaire qui appellera une méthode vuejs avant d’envoyer son contenu côté serveur. Ainsi, on valide les données côté client avant même de les envoyer.

Partons d’un exemple concret : imaginons un formulaire avec un nom, un prénom et une adresse email.

Voici les contraintes :

• Le nom doit faire maximum 50 caractères
• Le prénom doit faire maximum 50 caractères
• L’email doit respecter l’expression régulière /^(([^<>()[]\\.,;:\s@”]+(\.[^<>()[]\\.,;:\s@”]+)*)|(“.+”))@(([[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,24}))$/

Voici à quoi ressemble la partie HTML:

<form id="App" 
    @submit="checkForm"
    method="post">

    <p v-if="errors.length">
      <b>Please correct the following error(s):</b>
      <ul>
        <li v-for="error in errors" :key="error">{{ error }}</li>
      </ul>
    </p>

    <p>
      <label for="surname">Surname:</label>
      <input name="surname" type="text" v-model="surname">
    </p>

    <p>
      <label for="firstname">Firstname:</label>
      <input name="firstname" type="text" v-model="firstname">
    </p>

    <p>
      <label for="email">Mail:</label>
      <input name="email" type="email" v-model="email">
    </p>

    <p>
      <input type="submit" value="Submit">
    </p>
  </form>

Si on analyse déjà cette partie de code, on a :

• form @submit=”une fonction” : @submit permet de donner une fonction qui sera appelée avant de faire le submit du formulaire. Cela va donc nous permettre de valider les champs du formulaires et ensuite de décider si oui ou non on laisse passer le submit.
• On a ensuite un bloc “p” qui ne s’affiche que si le tableau errors contient quelque chose. Dans ce cas, on boucle sur la liste des erreurs pour les afficher dans le rendu html.
• On peut ensuite voir nos 3 input (nom, prénom et email) avec un binding vers le modèle vue-js pour remplir nos variables dans vuejs. En effet, pour valider les données du formulaire, il faut qu’elle soit connue de vuejs.
• Et on a finalement notre bouton submit pour valider le formulaire.

Voici maintenant la partie javascript vuejs qui va recueillir les valeurs de nos input et faire la vérification du formulaire :

export default {
  name: 'App',
  components: {

  },
  data() {
    return {
      errors: [],
      surname: null,
      firstname: null,
      email: null
    }
  },
  methods: {
    checkForm: function(e) {

      // Clear errors
      this.errors = [];

      // Check if the surname is not empty and length <= 50
      if (!this.surname || this.surname.length > 50)
      {
        this.errors.push("The surname can not be empty and must have a length <= 50 !");
      }

      // Check if the firstname is not empty and length <= 50
      if (!this.firstname || this.firstname.length > 50)
      {
        this.errors.push("The firstname can not be empty and must have a length <= 50 !");
      }

      // Check if the email is not empty and match the email pattern
      var re = /(^$|^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$)/;
      if (!this.email || !re.test(this.email))
      {
        this.errors.push("The email can not be empty and must be a valid email !");
      }

      if (!this.errors.length)
      {
        return true;
      }

      e.preventDefault();
    }
  }
}

On peut voir la déclaration de nos variables qui sont assignées depuis le formulaire html : surname, firstname et email.

Ensuite, on a la méthode checkForm qui est appelée lors du submit du formulaire. Cette fonction vérifie le nom, prénom et email (par rapport au regex cité plus haut). S’il y a des erreurs, elles sont stockées dans un tableau errors qui est affiché côté HTML. Si après les vérifications, il y a effectivement des erreurs, on fait un e.preventDefault() pour empêcher le submit. Le formulaire reste alors visible avec les données avant submit et les erreurs sont affichées dans la partie html qui fait le v-for sur la variable errors.

Conclusion

Vous pouvez voir que c’est déjà assez simple de mettre en place un système de validation de données côté client sans librairie. Si vous désirez aller plus loin, un nouvel article sera écrit dans les prochains jours pour expliquer la librairie vuelidate.

N’hésitez donc pas à commenter cet article et à vous inscrire au blog pour ne rien manquer. Je vous dis à bientôt sur le blog “développement web facile.com”.