Inicio » Blog »

15 marzo, 2025

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

#Laravel

📚 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

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

Suscríbete a nuestro canal en Youtube

Suscríbirse

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 651 veces | 0 usuarios

Código fuente no disponible.

Compartir link del tutorial con tus amigos


Curso de Laravel básico

USD 0.00

Descarga del código fuente

Curso de Laravel básico

Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú