✅ Agregar Campo Email a un Formulario en Laravel 12 | Part 02

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 de email. 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

]);

// Mostrar los datos capturados

return view('formulario.store', [

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

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

]);

}

Explicación:

• Añadimos una nueva regla de validación para el campo email: required|email|max:255.
• El campo email debe ser obligatorio, tener un formato válido de correo electrónico y no exceder los 255 caracteres.

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

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

html

<form action="{{ route('formulario.store') }}" method="POST" class="w-50">

@csrf

<!-- Campo de Texto -->

<div class="mb-3">

<label for="nombre" class="form-label">Nombre:</label>

<input type="text" id="nombre" name="nombre" class="form-control @error('nombre') is-invalid @enderror" value="{{ old('nombre') }}">

@error('nombre')

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

@enderror

</div>

<!-- Campo de Email -->

<div class="mb-3">

<label for="email" class="form-label">Correo Electrónico:</label>

<input type="email" id="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}">

@error('email')

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

@enderror

</div>

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

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

</form>

Explicación:

• Añadimos un nuevo campo de tipo email con las mismas clases de Bootstrap y validación de errores.
• Usamos old('email') para mantener el valor previo en caso de error.

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

Ahora que estamos capturando tanto el nombre como el correo electrónico, actualizamos la vista store.blade.php para mostrar ambos valores:

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>

</div>

</div>

<a href="{{ route('formulario.create') }}" class="btn btn-secondary mt-3">Regresar al Formulario</a>

</div>

Explicación:

• Mostramos tanto el nombre como el correo electrónico capturados.
• Agregamos un botón para regresar al formulario.

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 ingresando un nombre y un correo electrónico válido. Si los datos son correctos, serás redirigido a la página de resultados donde se mostrarán los datos capturados.