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:
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