15 marzo, 2025
Campos Select Simple y Múltiple en Laravel 12 con Validación y Bootstrap | Part 03
📚 Aprende a agregar campos select simple y múltiple en Laravel 12. Implementa validación, muestra datos capturados y estiliza con Bootstrap. Tutorial paso a paso para fo

Suscríbete a nuestro canal en Youtube
SuscríbirseEn los tutoriales anteriores, aprendimos a crear un formulario básico en Laravel con campos de tipo texto y email , incluyendo validaciones y estilización con Bootstrap. Ahora, expandiremos el formulario agregando un campo de tipo select , tanto en su versión simple como múltiple. Además, implementaremos validaciones específicas para estos campos y mostraremos los datos capturados.
Paso 1: Actualizar el Controlador
Ya tenemos nuestro FormController
con los métodos create
y store
. Ahora, modificaremos el método store
para incluir la validación del campo selectPaises
. Aquí está el código actualizado:
php
public function store(Request $request)
{
// Validar los datos
$validated = $request->validate([
'nombre' => 'required|string|max:255', // Validación del campo de texto
'email' => 'required|email|max:255', // Validación del campo de email
'selectPaises' => 'required|array|min:1', // Validación del campo select múltiple
'selectPaises.*' => 'integer|exists:paises,id', // Validación de cada valor seleccionado
]);
// Mostrar los datos capturados
return view('formulario.store', [
'nombre' => $validated['nombre'],
'email' => $validated['email'],
'paisesSeleccionados' => $validated['selectPaises']
]);
}
Explicación:
- Añadimos una nueva regla de validación para el campo
selectPaises
:required|array|min:1
. - El campo
selectPaises
debe ser un array con al menos un valor seleccionado. - Validamos que cada valor seleccionado sea un entero y exista en una lista predefinida (simulando una tabla de países).
Paso 2: Actualizar la Vista del Formulario (create.blade.php
)
Modificamos el archivo create.blade.php
para incluir el campo de tipo select
simple y múltiple. Aquí está el código actualizado:
html
<!-- Campo Select Múltiple -->
@php
$paises = [
['id' => 1, 'name' => 'México'],
['id' => 2, 'name' => 'Argentina'],
['id' => 3, 'name' => 'Perú'],
];
@endphp
<div class="mb-3">
<label for="selectPaises" class="form-label">Países:</label>
<select
name="selectPaises[]"
id="selectPaises"
class="form-select @error('selectPaises') is-invalid @enderror"
required
multiple
>
<option value="">Seleccione uno o más países</option>
@foreach ($paises as $pais)
<option
value="{{ $pais['id'] }}"
{{ in_array($pais['id'], old('selectPaises', [])) ? 'selected' : '' }}
>
{{ $pais['name'] }}
</option>
@endforeach
</select>
@error('selectPaises')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<!-- Botón de Envío -->
<button type="submit" class="btn btn-primary">Enviar</button>
Explicación:
- Usamos un array
$paises
para definir las opciones disponibles en el camposelect
. - El atributo
multiple
permite seleccionar múltiples valores. - Usamos
old('selectPaises', [])
para mantener las selecciones previas en caso de error. - Agregamos mensajes de error con la directiva
@error
.
Paso 3: Actualizar la Vista de Resultados (store.blade.php
)
Ahora que estamos capturando los países seleccionados, actualizamos la vista store.blade.php
para mostrar los datos capturados:
html
<div class="container mt-5">
<h2 class="mb-4">Datos Capturados</h2>
<div class="card w-50">
<div class="card-body">
<p class="card-text"><strong>Nombre:</strong> {{ $nombre }}</p>
<p class="card-text"><strong>Correo Electrónico:</strong> {{ $email }}</p>
<p class="card-text"><strong>Países Seleccionados:</strong></p>
<ul>
@foreach ($paisesSeleccionados as $id)
<li>{{ $paises[array_search($id, array_column($paises, 'id'))]['name'] }}</li>
@endforeach
</ul>
</div>
</div>
<a href="{{ route('formulario.create') }}" class="btn btn-secondary mt-3">Regresar al Formulario</a>
</div>
Explicación:
- Mostramos los países seleccionados utilizando el array
$paises
y el ID capturado. - Usamos
array_search
yarray_column
para encontrar el nombre del país correspondiente al ID seleccionado.
Paso 4: Probar el Proyecto
Ejecuta el servidor de desarrollo:
bash
php artisan serve
Visita la siguiente URL en tu navegador:
http://localhost:8000/formulario
Prueba el formulario seleccionando uno o más países. Si los datos son correctos, serás redirigido a la página de resultados donde se mostrarán los datos capturados.
Resumen
En esta continuación del tutorial:
- Añadimos un campo de tipo select múltiple al formulario existente.
- Implementamos validaciones específicas para el campo
selectPaises
. - Actualizamos las vistas para mostrar los datos capturados.
Este enfoque demuestra cómo expandir un formulario básico en Laravel de manera organizada y escalable. ¡Sigue practicando para mejorar tus habilidades en Laravel!
Leido 651 veces | 0 usuarios
Código fuente no disponible.