7 - Tutorial de Laravel 5 - Validar con Ajax JSON y mensajes flash

Bienvenid@s, en este capítulo del Tutorial de Laravel 5 continuamos viendo aspectos de validación de formularios, concretamente nos centraremos en realizar una petición vía ajax al servidor para validar el formulario con el cual estuvimos trabajando en el capítulo anterior, de existir algún error obtendremos una respuesta en formato json con los posibles mensajes de error, esto lo controlaremos desde el método response(array $errors) de la clase MiFormulario, igualmente recibiremos una respuesta json desde la acción validarMiFormulario de ser válido el formulario para mostrar un mensaje de enhorabuena en la vista.

Manejaremos dos posibilidades la utilización de la tecnología ajax para el caso de que el usuario tenga activado javascript, que es lo normal y la extraña posibilidad de que lo tenga desactivado, en este caso controlaremos la petición directa al servidor.

También veremos otro punto importante, el cual es la redirección enviando mensajes flash.

El código de cada uno de los ejercicios los podéis ver a continuación:

Vista miformulario.blade.php:

@extends('layouts.home')
@section('title', 'Mi formulario')
@section('description', 'Validar Mi formulario')
@section('keywords', 'validar, mi, formulario')

@section('content')

<h1>Mi Formulario</h1>

<div class="text-success" id='result'>
    @if(Session::has('message'))
        {{Session::get('message')}}
    @endif
</div>

<form method="post" action="{{url('home/validarmiformulario')}}" id='form'>
    <div class="form-group">
        <label for="nombre">Nombre: </label>
        <input type="text" name="nombre" class="form-control" value="{{Input::old('nombre')}}" />
        <div class="text-danger" id='error_nombre'>{{$errors->formulario->first('nombre')}}</div>
    </div>
    
    <div class="form-group">
        <label for="email">Email: </label>
        <input type="text" name="email" class="form-control" value="{{Input::old('email')}}" />
        <div class="text-danger" id='error_email'>{{$errors->formulario->first('email')}}</div>
    </div>
    {{csrf_field()}}
    <button type="submit" class="btn btn-primary">Enviar</button>
</form>

<script>
 $(function(){
     $("#form").submit(function(e){
         
         var fields = $(this).serialize();
         $.post("{{url('home/validarmiformulario')}}", fields, function(data){
             
             if(data.valid !== undefined){
                 $("#result").html("Enhorabuena formulario enviado correctamente");
                 $("#form")[0].reset();
                 $("#error_nombre").html('');
                 $("#error_email").html('');
             }
             else{
                 $("#error_nombre").html('');
                 $("#error_email").html('');
                 if (data.nombre !== undefined){
                    $("#error_nombre").html(data.nombre); 
                 }
                 if (data.email !== undefined){
                     $("#error_email").html(data.email);
                 }
             }
             
         });
         
         return false;
     });
 });
</script>

@stop

Clase MiFormulario.php:

<?php

namespace App\Http\Requests;
use App\Http\Requests\Request;

class MiFormulario extends Request{
    
    protected $redirect = "home/miformulario";
    
    public function rules(){
        return [
            'nombre' => 'required|min:3|max:12|regex:/^[a-z]+$/i',
            'email' => 'required|email',
        ];
    }
    
    public function messages(){
        return [
            'nombre.required' => 'El campo nombre es requerido',
            'nombre.min' => 'El mínimo permitido son 3 caracteres',
            'nombre.max' => 'El máximo permitido son 12 caracteres',
            'nombre.regex' => 'Sólo se aceptan letras',
            'email.required' => 'El campo email es requerido',
            'email.email' => 'El formato de email es incorrecto',
        ];
    }
    
    public function response(array $errors){
        if ($this->ajax()){
            return response()->json($errors, 200);
        }
        else
        {
        return redirect($this->redirect)
                ->withErrors($errors, 'formulario')
                ->withInput();
        }
    }
    
    public function authorize(){
        return true;
    }
    
}

Acción validarMiFormulario del controlador HomeController:

    public function validarMiFormulario(MiFormulario $formulario){
        $validator = Validator::make(
                $formulario->all(), 
                $formulario->rules(),
                $formulario->messages()
                );
        if ($validator->valid()){
            
            if ($formulario->ajax()){
                return response()->json(["valid" => true], 200);
            }
            else{
            return redirect('home/miformulario')
                    ->with('message', 'Enhorabuena formulario enviado correctamente');
            }
        }
    }