Agregar Inputs de Tipo Checkbox en Laravel 12 con Validación y Bootstrap | Part 04

En los tutoriales anteriores, aprendimos a implementar campos de tipo texto , email , y select (simple y múltiple) en un formulario básico de Laravel. Ahora, expandiremos el formulario agregando campos de tipo checkbox : uno simple para aceptar términos y condiciones, y otro múltiple para seleccionar cursos de programación. Además, implementaremos validaciones específicas para estos campos y mostraremos los datos capturados.

---

Paso 1: Actualizar el Controlador

Modificamos el método store en el controlador FormController para incluir la validación de los campos checkbox. 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

'terminos' => 'accepted', // Validación del checkbox simple (aceptar términos)

'cursos' => 'required|array|min:1', // Validación del checkbox múltiple (cursos)

'cursos.*' => 'string|in:PHP,Laravel,JavaScript,React', // Validación de cada curso seleccionado

]);

 

// Mostrar los datos capturados

return view('formulario.store', [

'nombre' => $validated['nombre'],

'email' => $validated['email'],

'paisesSeleccionados' => $validated['selectPaises'],

'cursosSeleccionados' => $validated['cursos']

]);

}

Explicación:

• Añadimos una regla de validación para el checkbox simple (terminos): accepted.
• Añadimos una regla de validación para el checkbox múltiple (cursos): required|array|min:1.
• Validamos que cada curso seleccionado sea una cadena y pertenezca a una lista predefinida.

---

Paso 2: Actualizar la Vista del Formulario (create.blade.php)

Modificamos el archivo create.blade.php para incluir los campos de tipo checkbox: uno simple para aceptar términos y otro múltiple para seleccionar cursos. Aquí está el código actualizado:

html

<!-- Campo Checkbox Simple: Aceptar Términos -->

<div class="mb-3">

<div class="form-check">

<input

type="checkbox"

id="terminos"

name="terminos"

class="form-check-input @error('terminos') is-invalid @enderror"

value="1"

>

<label for="terminos" class="form-check-label">Acepto los términos y condiciones</label>

@error('terminos')

<div class="invalid-feedback">{{ $message }}</div>

@enderror

</div>

</div>

 

<!-- Campo Checkbox Múltiple: Cursos de Programación -->

@php

$cursos = ['PHP', 'Laravel', 'JavaScript', 'React'];

@endphp

 

<div class="mb-3">

<label class="form-label">Cursos de Programación:</label>

@foreach ($cursos as $curso)

<div class="form-check">

<input

type="checkbox"

id="curso_{{ $curso }}"

name="cursos[]"

class="form-check-input @error('cursos') is-invalid @enderror"

value="{{ $curso }}"

{{ in_array($curso, old('cursos', [])) ? 'checked' : '' }}

>

<label for="curso_{{ $curso }}" class="form-check-label">{{ $curso }}</label>

</div>

@endforeach

@error('cursos')

<div class="invalid-feedback">{{ $message }}</div>

@enderror

</div>

 

<!-- Botón de Envío -->

<button type="submit" class="btn btn-primary">Enviar</button>

Explicación:

• El checkbox simple (terminos) valida si el usuario ha aceptado los términos.
• El checkbox múltiple (cursos) permite seleccionar uno o más cursos de programación.
• Usamos old('cursos', []) 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 cursos 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>Cursos Seleccionados:</strong></p>

<ul>

@foreach ($cursosSeleccionados as $curso)

<li>{{ $curso }}</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 cursos seleccionados utilizando el array $cursosSeleccionados.

---

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 cursos y aceptando los términos. 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 campos de tipo checkbox simple y checkbox múltiple al formulario existente.
• Implementamos validaciones específicas para estos campos.
• 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 484 veces | 0 usuarios