Tutoriales Validación de formularios en tiempo real con Livewire

Livewire es sin dudas una revolución en el ecosistema de Laravel. Se definen como: 

Livewire es un framework de pila completa para Laravel que simplifica la construcción de interfaces dinámicas, sin dejar la comodidad de Laravel.

Es indiscutible las potencialidades de Vue o React como fremeworks frontend para asegurar escalabilidad y reactividad a nuestros componentes, sin embargo para proyectos pequeños y medianos Livewire + Alpine js hacen que no sea necesario el uso de Vue o cullquier otro framework de esta envergadura.

Validación en tiempo real con Livewire

Para explicar un caso de uso de Livewire y mostrar su eficiencia, facildad y velocidad vamos a ver como hacer la validación de un formulario de contacto en una aplicación de laravel. (Asumo que ya tengas configurado el STACK TALL)

FrontEnd

Este sería nuestro input en la vista .blade.php

Veámoslo por partes:

1- wire:model="clientName" : Vincula directamente el valor de este campo con una variable global en nuestro componente Livewire llamada clientName

2-wire:model.lazy : Hace que el valor de la variable clientName se sincronice solo cuanto se termina de escribir en el campo de texto evitando que se envíe una solicitud por cada letra que se escriba.

3- class="input-text" : Es el nombre de un conjunto de clases de utilidad de Tailwind Css que tengo preestablecidas en el archivo  app.scss. Así: 

1. .input-text { @apply block w-full shadow-sm sm:text-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md};  

BackEnd

En nuestro componente Livewire declaramos la variable global "clientName"  como en el siguiente componente:

Luego para validar automáticamente cuando se levanta el cursor del campo de texto que está vinculado a esta variable debemos escribir un método con el nombre compuesto por dos palabras "updated" + "ClientName" :

 

Veámoslo por partes:

1- updatedClientName: Se dispara cuando dicha variable es actualizada 

2- $this->validate() : Es un método de livewire que recibe un array con el nombre de la varibale y las reglas de validación

3- 'required|min:3|max:128'  : Son tres reglas de validación, campo requerido, 3 caractéres mínimos y 128 máximos

Mostrando el error en tiempo real

Para que nuestro ejercicio esté completo solo nos resta mostrar el mensaje de error al usuario para dicho campo. Por suerte la tenemos muy fácil, usamos la directiva blade @error que recibe el nombre de la variable en cuestión:

1- {{$message}} : Muestra el mensaje de error guardado en la sessión para la variable que recibe el método @error()

Y listo, eso es todo, con este método puedes validar cualquier tipo de campos.