Vuelidate: validação de formulário VueJS

Introdução

O Vuelidate é uma biblioteca do VueJS que foi criada para realizar a validação de formulários.

Um dos pilares de todos os sitemas web, são os formulários, eles nos possibilitam realizar cadastro de informação, edição, login no sistema e outras diversas informações que vão para o backend por meio dos formulários.

Tendo isso, é necessário validar se os dados que serão enviados ao backend da aplicação estão corretos, pois caso não esteja, é possível já informar ao usuário antes que os dados sejam enviados.

Validar o formulário no frontend é importante pois evita consumo do backend de maneira desnecessária, pode evitar ataques ao sistema, feedback de erros mais rápido ao usuário e tudo isso da uma melhor experiência ao cliente.

Sobre o Vuelidate

O Vuelidate é uma das principais bibliotecas para a validação no VueJS, com ela é possível validar campos requeridos, quantidade mínima de caracteres, range de valores, números, e-mail, ip e entre outros diversos campos.

Para realizar a instalação no projeto é possível com o comando:

npm install vuelidate --save
ou
yarn add vuelidate --save

Como é realizada a validação

As validações que o Vuelidate realiza, ficam dentro do export default do componente, como se fosse a declaração de um watch ou computed, porém é passado um objeto validations, com todos os campos a serem verificados e suas validações dentro dele.

Caso algum dos campos esteja com erro, ele é retornado para a variável $v.nome_do_campo.validacao, com isso você consegue colocar mensagens personalizadas para cada tipo de erro.

Por exemplo, se o campo e-mail for requerido e estiver vazio, o erro vai ser $v.email.required = true, e com isso é possível adicionar um v-if e uma mensagem de erro para o campo.

Primeiro exemplo

Para este exemplo, será um formulário com dois campos sendo Nome e Idade. O campo nome precisa ser preenchido e ter no mínimo quatro letras, já o campo Idade precisa ser entre 20 e 30.

O formulário do componente irá ficar dessa forma:

<div class="div-center">
      <div>
        <label for="name" class="label">Nome</label>
        <input type="text" name="name" v-model.trim="$v.name.$model" :class="{ 'error': $v.name.$error, 'success': !$v.name.$error }"/>
      </div>
      <br>
      <div>
        <label for="age" class="label">Idade</label>
        <input type="text" name="age" v-model="$v.age.$model" :class="{ 'error': $v.age.$error, 'success': !$v.age.$error }"/>
      </div>
    </div>

E as validações dos campos ficarão dessa forma:

import { required, minLength, between } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      name: '',
      age: 0
    }
  },
  validations: {
    name: {
      required,
      minLength: minLength(4)
    },
    age: {
      between: between(20, 30)
    }
  }
}

Com isso, quando o formulário for submetido, o Vuelidate analisa o que está dentro de validations e faz a validação campo a campo, primeiramente o campo Nome se tem pelo menos quatro caracteres e se não é vazio, e depois o campo idade, se está entre 20 e 30.

Validar dados no submit do formulário

Da forma anterior, os dados estavam sendo validados assim que preenchidos, é possível realizar essa validação somente quando for submeter o formulário e assim exibir todos os feedbacks na tela de uma só vez.

O vuelidate tem um atributo chamado $invalid, que tem o valor booleano se aquele formulário é válido ou não.

Exemplo de código com validação no envio, HTML:

<template>
  <div id="app">
    <form @submit.prevent="submit">
    <div class="div-center">
      <div>
        <label for="name" class="label">Nome</label>
        <input type="text" name="name" v-model.trim="$v.name.$model" :class="{ 'error': $v.name.$error }"/>
      </div>
      <br>
      <div>
        <label for="age" class="label">Idade</label>
        <input type="text" name="age" v-model="$v.age.$model" :class="{ 'error': $v.age.$error }"/>
      </div>
      <button class="button" type="submit" :disabled="submitStatus === 'PENDING'">Submit!</button>
    </div>
    </form>
  </div>
</template>

Script:

import { required, minLength, between } from "vuelidate/lib/validators";
export default {
  name: "App",
  data() {
    return {
      name: "",
      age: 0,
      submitStatus: null
    };
  },
  methods: {
    submit() {
      console.log('submit!')
      this.$v.$touch()
      if (this.$v.$invalid) {
        this.submitStatus = 'ERROR'
      } else {
        // Lógica de envio dos dados para uma API
        this.submitStatus = 'PENDING'
        setTimeout(() => {
          this.submitStatus = 'OK'
        }, 500)
      }
    }
  },
  validations: {
    name: {
      required,
      minLength: minLength(4),
    },
    age: {
      between: between(20, 30),
    },
  },
};

Style:

.div-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 30px;
}
.label {
  margin-right: 10px;
}
.error {
  border: 3px solid red;
}

Dessa forma, os campos só serão validados quando o usuário clicar no botão submit, antes disso, ficarão sem a validação, com o usuário podendo colocar os dados normalmente.

Vídeo sobre o assunto

Gravei um vídeo mostrando como realizar as validações:

https://youtu.be/ejBT6z5icxs

Conclusão

Além dessas funções, o Vuelidate tem outras diversas, com ele é possível realizar a validação de formulários completos, sugiro que dê uma olhada na documentação que é bem completa e explicativa, espero ter ajudado, até o próximo post 🙂

Para ver outros canais onde o posto conteúdo, meu Github e também cursos, veja os Links do Programando Soluções.

Referências

https://vuelidate.js.org/