Campos Select Simple y Múltiple en Laravel 12 con Validación y Bootstrap | Part 03

En 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 campo select.
• 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 y array_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 894 veces | 0 usuarios