VeeValidate es un plugin para VueJS que le permite validar los elementos html y mostrar errores de una forma fácil, sólo agregando la directiva v-validate en el input y las validaciones que necesitamos separadas por un pipe.

VeeValidate tiene más de 20 validaciones por defecto, además nos crea un objeto Errors en donde se almacenan las referencias a todas las validaciones que tenemos en nuestra instancia de Vue.

El objeto Errors expone métodos para verificar el estado de las validaciones, como errors.first (‘name’) que obtiene el primer mensaje de error asociado al input name o errors.any() verifica si contiene alguna validación pendiente y errors.has(‘name’) para verificar si existen validaciones fallidas relacionadas a este campo.

En mi ejemplo he creado un formulario de contacto donde valido las nombre, email y mensaje, y explicaré cómo funciona VeeValidate.

1- Agregar la referencia de los scripts en nuestra pagina.

<script src="https://unpkg.com/vue "></script>
 <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js "></script>
 <script src="app.js "></script>

2- En nuestro app.js especificar a Vue que utilize VeeValidate.

Vue.use(VeeValidate);

3- En nuestro html utilizar la directiva de v-validate en los elementos que necesitamos las validaciones. En este ejemplo agrego al input name la directiva v-validate y la configuración que es un campo requerido y como mínimo 10 caracteres.

<div class="control">
 <input type="text" v-model="model.name" id="name" name="name" class="input" v-validate="'required'|min:10" >
</div>

Utilizando el método has del objeto errors puedo verificar si existe un error para name y el first para traer el mensaje de error específico de name, ademas de utilizar el método any para desactivar el button si existe algún error.

<p v-show="errors.has('name')" class="help">{{ errors.first('name') }}</p>
<div class="field">
<div class="control"> 
<button v-bind:disabled="errors.any()" class="button is-primary ">{{title}} </button>
</div> 
</div>

Para ver el código completo http://jsfiddle.net/mrdanywalls/n68v1835/

Pagina oficial de VeeValidate http://vee-validate.logaretm.com

Gracias a @himself por las correcciones.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *