Agregar Inputs de Tipo Radio en Laravel 12 con Validación y Bootstrap | Part 05

En los tutoriales anteriores, aprendimos a implementar campos de tipo texto , email , select (simple y múltiple), y checkbox (simple y múltiple) en un formulario básico de Laravel. Ahora, expandiremos el formulario agregando un campo de tipo radio para permitir al usuario seleccionar su género. Además, implementaremos validaciones específicas para este campo y mostraremos los datos capturados.

---

Paso 1: Actualizar el Controlador

Modificamos el método store en el controlador FormController para incluir la validación del campo gender. 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

'gender' => 'required|string|in:male,female', // Validación del campo radio

]);

 

// Mostrar los datos capturados

return view('formulario.store', [

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

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

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

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

'generoSeleccionado' => $validated['gender']

]);

}

Explicación:

• Añadimos una regla de validación para el campo gender: required|string|in:male,female.
• El campo gender debe ser obligatorio y su valor debe ser uno de los valores permitidos (male o female).

---

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

Modificamos el archivo create.blade.php para incluir el campo de tipo radio. Aquí está el código actualizado:

html

<!-- Campo Radio: Elegir Género -->

<div class="my-3">

<label>Elegir género</label>

 

<!-- Opción Masculino -->

<div class="form-check">

<input

type="radio"

name="gender"

id="male"

value="male"

{{ old('gender') === 'male' ? 'checked' : '' }}

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

>

<label class="form-check-label" for="male">Masculino</label>

</div>

 

<!-- Opción Femenino -->

<div class="form-check">

<input

type="radio"

name="gender"

id="female"

value="female"

{{ old('gender') === 'female' ? 'checked' : '' }}

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

>

<label class="form-check-label" for="female">Femenino</label>

</div>

 

<!-- Mensaje de Error -->

@error('gender')

<div class="alert alert-danger">{{ $message }}</div>

@enderror

</div>

<!-- //INPUT RADIO -->

Explicación:

• Usamos old('gender') para mantener la selección previa en caso de error.
• Agregamos mensajes de error con la directiva @error.
• Estilizamos los botones de radio con las clases de Bootstrap (form-check y form-check-input).

---

Paso 3: Actualizar la Vista de Resultados (store.blade.php)

Ahora que estamos capturando el género seleccionado, 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>Género Seleccionado:</strong> {{ ucfirst($generoSeleccionado) }}</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 el género seleccionado utilizando la variable $generoSeleccionado.
• Usamos ucfirst() para capitalizar el valor del género (por ejemplo, "male" se muestra como "Male").

---

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 un género. 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 radio al formulario existente.
• Implementamos validaciones específicas para este campo.
• Mostramos los datos capturados en la vista de resultados.

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