Curso Laravel Livewire - Validar datos - CRUD
Otro factor importante es la validación de formularios; la misma estructura que manejábamos con Laravel básico, con el manejo de las validaciones en clases apartes o mediante el request, las podemos hacer localmente en el componente de Livewire.
Para validar en Livewire, tenemos que definir una propiedad protegida llamada $rules la cual le tenemos que definir las reglas de validación:
protected $rules = [
'title' => "required|min:2|max:255",
'text' => "nullable"
];Importante notar que, las keys de las reglas tienen que ser las propiedades que estés usando en el wire:model y no las columnas o propiedades del modelo que estes administrando; aparte de esto, tienes que llamar al método validate() para aplicar las validaciones; por lo demás, muestras los posibles errores empleando la directiva error de blade.
Caso práctico
Vamos a modificar la clase componente como:
class Save extends Component
{
public $title;
public $text;
protected $rules = [
'title' => "required|min:2|max:255",
'text' => "nullable",
];*
***
public function submit()
{
// validate
$this->validate();
$this->category = Category::create(
[
'title' => $this->title,
'slug' => str($this->title)->slug(),
'text' => $this->text,
]
);
***En el cual puedes ver los cambios indícanos anteriormente; la propiedad $rules y el uso del método validate() para validar los datos.
En el componente de vista, mostramos los errores:
<div>
<form wire:submit.prevent="submit">
<label for="">Título</label>
@error('title')
{{$message}}
@enderror
<input type="text" wire:model="title">
@error('text')
{{$message}}
@enderror
<label for="">Texto</label>
<input type="text" wire:model="text">
<button type="submit">Enviar</button>
</form>
</div>Ya con esto, si enviamos un formulario inválido, veremos los errores por pantalla.
Transcripción del vídeo
Para aplicar validaciones en Kivewire es muy sencillo ya que Recuerda que digo que en Livewire, son componentes que es lo que estamos trabajando Entonces por aquí lo puedes ver por aquí tenemos una propiedad que funciona Exactamente igual a lo que hacíamos en las clases request por aquí colocamos las validaciones por lo demás aquí colocamos rules para otra vez porque es una propiedad interna Ya veremos otras más adelante pero esta viene de la primera y colocamos nuestras reglas Entonces esto no se valida automáticamente si no lo tenemos que hacer a nivel de código aquí colocamos el validate que es un método interno en vez de la clase component del Livewire y se validan automáticamente y funciona de igual manera que funcionaba cuando hacíamos aquí la inyección
protected $rules = [
'title' => "required|min:2|max:255",
'text' => "nullable",
];*Ya vamos a probar eso entonces para ver un problemita que tenemos acá voy a recargar si damos un same Fíjate que va a dar aquí un bonito error ya que te indica bueno la parte de integridad que está violando lo que coloca Vamos ahí seguramente es el título que no puede ser vacío tal cual puedes ver acá entonces vamos a partir de esto vamos aquí a aplicar las validaciones y parto de eso porque todavía no vamos a mostrar los errores Entonces es importante ver que tenemos ese bloqueo y por aquí vamos a declarar la propiedad es de tipo protegida Bueno creo que puede ser cualquier tipo ahí lo puedes probar ya que a la final se maneja aquí interna a esta clase y por aquí las colocamos colocamos title aquí las validaciones es otra vez lo típico lo que tú quieras aquí voy a colocar required que lo que bueno lo típico required una longitud mínima de unos dos y una longitud máxima de unos 255 que creo que fue la longitud máxima que le definí por lo demás al text voy a indicarle que puede ser de tipo nulo Aunque tú coloca lo que tú quieras aquí la definimos:
protected $rules = [
'title' => "required|min:2|max:255",
'text' => "nullable",
];*y Aquí vamos a emplearla ya que si no la empleamos no estamos haciendo nada se llama validate ahí lo tenemos y vamos a ver regresamos acá otra vez voy a partir de esto un campo completamente limpio y fíjate que ya no da la excepción porque están funcionando las validaciones y esto lo que hace es detener la ejecución que viene a posterior tal cual puedes ver esto devuel un falso y por lo tanto no sigue la ejecución Entonces si colocamos un formulario inválido aquí no va a colocar nada doy un sen aquí en principio se creo Creo que pudiste ver aquí una actualización en mi terminal creo que sería esta lo que indica que se creó revisamos acá la parte de la categoría y ahí la tenemos así que así de fácil son las validaciones en Livewire.
Transcripción del vídeo
Para aplicar validaciones en Livewire es muy sencillo porque son componentes que es lo que estamos trabajando, entonces por aquí lo puedes ver por aquí tenemos una propiedad que funciona exactamente igual a lo que hacíamos en las clases request por aquí colocamos las validaciones por lo demás aquí colocamos rules para otra vez porque es una propiedad interna ya veremos otras más adelante pero esta viene de la primera y colocamos nuestras reglas entonces esto no se valida automáticamente si no lo tenemos que hacer a nivel de código aquí colocamos el validate que es un método interno de la clase component del Livewire y se validan automáticamente y funciona de igual manera que funcionaba cuando hacíamos aquí la inyección ya vamos a probar eso entonces:
public function submit()
{
// validate
$this->validate();
$this->category = Category::create(Para ver un problemita que tenemos acá voy a recargar si damos un same Fíjate que va a dar aquí un bonito error ya que te indica bueno la parte de integridad que está violando lo que coloca vamos ahí seguramente es el título que no puede ser vacío tal cual puedes ver acá entonces vamos a partir de esto vamos aquí a aplicar las validaciones y parto de eso porque todavía no vamos a mostrar los errores Entonces es importante ver que tenemos ese bloqueo y por aquí vamos a declarar la propiedad es de tipo protegida Bueno creo que puede ser cualquier tipo ahí lo puedes probar ya que a la final se maneja aquí interna a esta clase y por aquí las colocamos colocamos title aquí las validaciones es otra vez lo típico lo que tú quieras aquí voy a colocar required que lo que bueno lo típico requite una longitud mínima de unos dos y una longitud máxima de unos 255 que creo que fue la longitud máxima que le definí por lo demás al text voy a indicarle que puede ser de tipo nulo Aunque tú coloca lo que tú quieras newel aquí la definimos y aquí vamos a emplearla ya que si no la empleamos no estamos haciendo nada se llama validate ahí lo tenemos y vamos a ver regresamos acá otra vez voy a partir de esto un campo completamente limpio y fíjate que ya no da la excepción porque están funcionando las validaciones y esto lo que hace es detener la ejecución que viene a posterior:
public function submit()
{
// validate
$this->validate();
dd(true);
$this->category = Category::create(Tal cual puedes ver esto devuelve un falso y por lo tanto no sigue la ejecución entonces si colocamos un formulario inválido aquí no va a colocar nada doy un sen aquí en principio creo que pudiste ver aquí una actualización en mi terminal creo que sería esta lo que indica que se creó revisamos acá la parte de la categoría y ahí la tenemos así que así de fácil son las validaciones en Livewire.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter