Validar formularios se ha vuelto más fácil con el tiempo para los desarrolladores web. En los primeros días, había algunos enfoques realmente torpes que tenía que implementar para obtener una validación básica. Sin embargo, las cosas son mucho más fáciles en estos días, y veremos cómo agregar una validación simple al envío de un formulario en Laravel. En nuestro último tutorial, obtuvimos un formulario bastante bueno configurado para permitirnos enviar un nuevo juego a nuestra base de datos de juegos. Desafortunadamente, todavía no hay ningún medio de validación. Eso significa que los usuarios pueden insertar fácilmente datos falsos o incluso en blanco. Arreglaremos esta deficiencia ahora mismo en este sencillo tutorial.
Validación del navegador del lado del cliente Html5
Antes de que incluso necesitemos implementar algo en el lado del servidor, sigamos adelante y agreguemos la validación del lado del cliente HTML5 a nuestro formulario. Es tan fácil como agregar un requiredatributo simple a las inputetiquetas de nuestro formulario. Mire las etiquetas destacadas a continuación para ver cómo lo hacemos.
recursos / vistas / juegos / create.blade.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | @extends('layouts.master') @section('content') <h2>Add a game</h2> <form method="post" action="/games" enctype="multipart/form-data"> {{ csrf_field() }} <div class="form-group row"> <label for="titleid" class="col-sm-3 col-form-label">Game Title</label> <div class="col-sm-9"> <input name="title" type="text" class="form-control" id="titleid" placeholder="Game Title" required> </div> </div> <div class="form-group row"> <label for="publisherid" class="col-sm-3 col-form-label">Game Publisher</label> <div class="col-sm-9"> <input name="publisher" type="text" class="form-control" id="publisherid" placeholder="Game Publisher" required> </div> </div> <div class="form-group row"> <label for="releasedateid" class="col-sm-3 col-form-label">Release Date</label> <div class="col-sm-9"> <input name="releasedate" type="text" class="form-control" id="releasedateid" placeholder="Release Date" required> </div> </div> <div class="form-group row"> <label for="gameimageid" class="col-sm-3 col-form-label">Game Image</label> <div class="col-sm-9"> <input name="image" type="file" id="gameimageid" class="custom-file-input" required> <span style="margin-left: 15px; width: 480px;" class="custom-file-control"></span> </div> </div> <div class="form-group row"> <div class="offset-sm-3 col-sm-9"> <button type="submit" class="btn btn-primary">Submit Game</button> </div> </div> </form> @endsection |
Tratar de enviar un formulario que no se ha completado correctamente ahora le da al usuario algunos comentarios sobre dónde puede haber perdido algo o haber cometido un error.
Agregar validación al store()método
La validación simple del navegador html5 es excelente, pero no es 100% infalible. Aún necesitará validar los datos en el lado del servidor antes de intentar insertar algo en la base de datos. Esto es realmente fácil de hacer en Laravel. Aquí agregamos algunas reglas de validación simples a nuestro store()método, usando el $this->validate()método en nuestro controlador.
aplicación / Http / Controllers / GamesController.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Game; class GamesController extends Controller { public function index() { $games = Game::all(); return view('games.index', ['games' => $games]); } public function show(Game $id) { return view('games.show', ['game' => $id]); } public function create() { return view('games.create'); } public function store() { $this->validate(request(), [ 'title' => 'required|unique:games', 'publisher' => 'required', 'releasedate' => 'required', 'image' => 'required', ]); $game = new Game; $game->title = request('title'); $game->publisher = request('publisher'); $game->releasedate = request('releasedate'); $game->image = request()->file('image')->store('public/images'); $game->save(); return redirect('/games'); } } |
Con el código resaltado arriba, ahora también tenemos cierta validación en el lado del servidor. Hay * muchas * reglas de validación disponibles para usted, pero solo queremos asegurarnos de que cada campo sea obligatorio. Además de esto, queremos que el título del juego sea único. No queremos agregar el mismo juego a la base de datos dos veces.
Visualización de errores si es necesario
Si la validación pasa, el store()método simplemente continúa con su negocio de insertar los datos proporcionados en la base de datos. Sin embargo, si hubo un problema, se completará una $errorsvariable y el usuario será redirigido al formulario de donde vino. Al llegar a esa variable, podemos mostrar los errores al usuario. Así es como podemos actualizar nuestro archivo de vista para manejar esta tarea.
recursos / vistas / juegos / create.blade.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | @extends('layouts.master') @section('content') <h2>Add a game</h2> <form method="post" action="/games" enctype="multipart/form-data"> {{ csrf_field() }} <div class="form-group row"> <label for="titleid" class="col-sm-3 col-form-label">Game Title</label> <div class="col-sm-9"> <input name="title" type="text" class="form-control" id="titleid" placeholder="Game Title" required> </div> </div> <div class="form-group row"> <label for="publisherid" class="col-sm-3 col-form-label">Game Publisher</label> <div class="col-sm-9"> <input name="publisher" type="text" class="form-control" id="publisherid" placeholder="Game Publisher" required> </div> </div> <div class="form-group row"> <label for="releasedateid" class="col-sm-3 col-form-label">Release Date</label> <div class="col-sm-9"> <input name="releasedate" type="text" class="form-control" id="releasedateid" placeholder="Release Date" required> </div> </div> <div class="form-group row"> <label for="gameimageid" class="col-sm-3 col-form-label">Game Image</label> <div class="col-sm-9"> <input name="image" type="file" id="gameimageid" class="custom-file-input" required> <span style="margin-left: 15px; width: 480px;" class="custom-file-control"></span> </div> </div> <div class="form-group row"> <div class="offset-sm-3 col-sm-9"> <button type="submit" class="btn btn-primary">Submit Game</button> </div> </div> @if(count($errors)) <div class="form-group"> <div class="alert alert-danger"> <ul> @foreach($errors->all() as $error) <li>{{$error}}</li> @endforeach </ul> </div> </div> @endif </form> @endsection |
En una de nuestras publicaciones anteriores, agregamos The Legend of Zelda a la mesa de juegos en nuestra base de datos. Intentemos agregarlo nuevamente y veamos qué sucede.
¡Excelente! Entonces, aunque completamos todos los campos correctamente en el formulario y obtuvimos la validación del navegador del lado del cliente html5 para aprobar, recibimos un mensaje de error agradable que nos dice que el título que proporcionamos ya se ha tomado. Entonces, nuestra regla de validación que proporcionamos en el store()método de nuestro GamesController funcionó muy bien. Recuerde que especificamos que queremos un título único por la regla de 'título' => 'obligatorio | único: juegos' .
Evitar que el formulario borre datos
Todo funciona muy bien en este momento, pero ¿notó algo sobre los datos que habíamos ingresado en el formulario? Se fue. Si cometemos un error durante el proceso de completar el formulario, luego intentamos enviarlo, todos nuestros datos se borran al redireccionar. Ahora el usuario debe completar todos los campos del formulario nuevamente, en lugar de poder corregir el único error que pudo haber cometido. Veamos cómo recordar datos de formulario en nuestro archivo de vista agregando un atributo de valor y haciendo uso de la old()función que proporciona Laravel. Veamos cómo.
recursos / vistas / juegos / create.blade.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | @extends('layouts.master') @section('content') <h2>Add a game</h2> <form method="post" action="/games" enctype="multipart/form-data"> {{ csrf_field() }} <div class="form-group row"> <label for="titleid" class="col-sm-3 col-form-label">Game Title</label> <div class="col-sm-9"> <input name="title" type="text" class="form-control" id="titleid" placeholder="Game Title" required value="{{ old('title') }}"> </div> </div> <div class="form-group row"> <label for="publisherid" class="col-sm-3 col-form-label">Game Publisher</label> <div class="col-sm-9"> <input name="publisher" type="text" class="form-control" id="publisherid" placeholder="Game Publisher" required value="{{ old('publisher') }}"> </div> </div> <div class="form-group row"> <label for="releasedateid" class="col-sm-3 col-form-label">Release Date</label> <div class="col-sm-9"> <input name="releasedate" type="text" class="form-control" id="releasedateid" placeholder="Release Date" required value="{{ old('releasedate') }}"> </div> </div> <div class="form-group row"> <label for="gameimageid" class="col-sm-3 col-form-label">Game Image</label> <div class="col-sm-9"> <input name="image" type="file" id="gameimageid" class="custom-file-input" required value="{{ old('image') }}"> <span style="margin-left: 15px; width: 480px;" class="custom-file-control"></span> </div> </div> <div class="form-group row"> <div class="offset-sm-3 col-sm-9"> <button type="submit" class="btn btn-primary">Submit Game</button> </div> </div> @if(count($errors)) <div class="form-group"> <div class="alert alert-danger"> <ul> @foreach($errors->all() as $error) <li>{{$error}}</li> @endforeach </ul> </div> </div> @endif </form> @endsection |
Esto es genial ahora. Hemos redirigido al formulario, pero los datos del formulario que escribimos originalmente se conservan. Definitivamente desea manejar cosas como esta para mejorar la experiencia del usuario. Tenga en cuenta que la old()función acepta un argumento del nombre del campo para repoblar. En otras palabras, cualquiera que sea el valor que se establece en el nameatributo para la inputetiqueta dada , debe ser el mismo valor pasado a la old()función.
Extraer errores de formulario a un parcial
El marcado que usamos en nuestro archivo create.blade.php para mostrar errores de formulario es un material bastante estándar que se puede usar en otros lugares. Tiene sentido extraer ese marcado a su propio parcial. Creemos un archivo en resources / views / partials llamado formerrors.blade.php y rellenemos con el marcado indicado.
| @if(count($errors)) <div class="form-group"> <div class="alert alert-danger"> <ul> @foreach($errors->all() as $error) <li>{{$error}}</li> @endforeach </ul> </div> </div> @endif |
Ahora en nuestro archivo create.blade.php lo incluimos así, y todo sigue funcionando como era de esperar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | @extends('layouts.master') @section('content') <h2>Add a game</h2> <form method="post" action="/games" enctype="multipart/form-data"> {{ csrf_field() }} <div class="form-group row"> <label for="titleid" class="col-sm-3 col-form-label">Game Title</label> <div class="col-sm-9"> <input name="title" type="text" class="form-control" id="titleid" placeholder="Game Title" required value="{{ old('title') }}"> </div> </div> <div class="form-group row"> <label for="publisherid" class="col-sm-3 col-form-label">Game Publisher</label> <div class="col-sm-9"> <input name="publisher" type="text" class="form-control" id="publisherid" placeholder="Game Publisher" required value="{{ old('publisher') }}"> </div> </div> <div class="form-group row"> <label for="releasedateid" class="col-sm-3 col-form-label">Release Date</label> <div class="col-sm-9"> <input name="releasedate" type="text" class="form-control" id="releasedateid" placeholder="Release Date" required value="{{ old('releasedate') }}"> </div> </div> <div class="form-group row"> <label for="gameimageid" class="col-sm-3 col-form-label">Game Image</label> <div class="col-sm-9"> <input name="image" type="file" id="gameimageid" class="custom-file-input" required value="{{ old('image') }}"> <span style="margin-left: 15px; width: 480px;" class="custom-file-control"></span> </div> </div> <div class="form-group row"> <div class="offset-sm-3 col-sm-9"> <button type="submit" class="btn btn-primary">Submit Game</button> </div> </div> @include('partials.formerrors') </form> @endsection |
Con estos pasos en su lugar, tenemos un pequeño sistema de validación decente en nuestra aplicación de base de datos de juegos. Terminemos agregando un juego más que sepamos que cumple con todos los requisitos para asegurarnos de que aún podemos agregar un nuevo juego a la base de datos como esperamos. Completamos los detalles de nuestro juego Metroid para ser enviado.
¡Parece que nuestra adición está funcionando muy bien!
Con estos pasos implementados, ahora tenemos una validación que garantiza que los usuarios ingresen los datos correctos para enviarlos en nuestros formularios. Si las cosas van bien, agregamos los datos a la base de datos. Si las cosas no cumplen con los requisitos que especificamos, los usuarios reciben una lista de errores para corregir antes de volver a intentarlo.
Cómo validar los envíos de formularios en el resumen de Laravel
Este tutorial nos llevó un paso más adelante en nuestro aprendizaje de Laravel. Tomamos nuestra pequeña aplicación de juegos y primero agregamos una simple validación del lado del navegador html5 a nuestro formulario con el requiredatributo. A partir de ahí, también vimos cómo agregar validación en el lado del servidor haciendo uso del $this->validate()método que nos proporciona Laravel. Luego vimos que es necesario agregar algunas marcas a nuestro formulario para que podamos mostrar errores si falla la validación. Hicimos esto recorriendo el contenido de la $errorsvariable. Finalmente, vimos que dado que el marcado de error es un código repetible, podemos extraer ese marcado a un archivo de vista parcial que se puede reutilizar en otros formularios si es necesario. ¡Bravo!
0 Comentarios