Creando un sistema CRUD con Vue y Laravel 19/23

serie-crud-js

19- Validaciones. Mensajes de error del back.

En el front solo haremos una validación básica de 4 campos de Empleado que no pueden estar  vacíos:

  • Nombre -> nameEmployee
  • Apellido -> lastnameEmployee
  • Correo -> emailEmployee
  • Fecha de  nacimiento -> birthdayEmployee

Hasta ahora las validaciones habían sido solo de un campo. Ahora tenemos 4 campos a comprobar con sus 4 mensajes de errores.

Esta comprobación la hacemos en dos sitios: create  y update.

Usaremos una máxima de la programación Si un código se repite conviértelo en función. Para no tener que validar todos los campos dos veces haremos una función de validación que nos devolverá si hay errores o no.

En methods creamos al siguiente función:

validateEmployee() {
    this.errorEmployee = 0;
    this.errorMessageEmployee = [];
    if (!this.nameEmployee) this.errorMessageEmployee.push('El nombre no puede estar vacio');
    if (!this.lastnameEmployee) this.errorMessageEmployee.push("El apellido no puede estar vacio");
    if (!this.emailEmployee) this.errorMessageEmployee.push('El correo electronico no puede estar vacio');
    if (!this.birthdayEmployee) this.errorMessageEmployee.push('La fecha de nacimiento no puede estar vacia');
    if (this.errorMessageEmployee.length) this.errorEmployee = 1;
    return this.errorEmployee;
},

Un detalle que veremos mas adelante es que hemos convertido la variable errorMessageEmployee en array. Ya veremos ese cambio.

Lo primero es poner el error a cero y vaciar el array para no heredar errores de validaciones anteriores.

Luego comprobamos las 4 variables y si no están vacías agregamos al array el mensaje correspondiente.

El ultimo if solo comprueba que el array no este vacío, si es así el error se pone a 1 para que se muestren

Se devuelve el valor de errorEmployee

Ahora cambiemos la definición de la variable en data

errorMessageEmployee: '',

lo cambiamos por

errorMessageEmployee: [],

y el html que teníamos

<div v-show="errorEmployee" class="columns text-center">
    <div class="column text-center text-danger">
        @{{ errorMessageEmployee }} 
    </div>
</div>

lo cambiaremos así porque ahora los mensajes es un array

<div v-show="errorEmployee" class="columns text-center">
    <div class="column text-center text-danger">
        <div v-for="error in errorMessageEmployee">
            @{{ error }}
        </div>
    </div>
</div>

Como ya hemos visto otras veces usaremos v-for para mostrar todos los contenidos del array.

Ahora ya podemos hacer la primer validación en createEmployee. Es una función vacía a la que solo agregaremos las siguientes lineas

if (this.validateEmployee()) {
    return;
}

Es sencillo. La función validateEmployee devuelve el errorEmployee si es cero continua, si es 1 culmina la creación.

Pasemos a las validaciones de backend. Serán tres . Una es el formato del email para que sea correcto y tambien que sea unico. La otra es una personalizada: No se aceptaran empleados menores de 18 años.

Usaremos los FormRequests de Laravel para el email.

El primero paso es escribir en la linea de comando

php artisan make:request StoreEmployee

El nombre que he elegido no es al azar. Store es porque este request lo usaremos para guardar / crear pero usaremos otro request para Update que veremos mas adelante.

Esta orden nos genera un esqueleto del requests en App/Http/Requests/StoreEmployee.php que se ve asi:

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StoreEmployee extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return false;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            //
        ];
    }
}

El primer cambio sera cambiar el false de la función authorize por true.

El segundo cambio lo haremos en la función rules cambiando el return que hay por

return [
   'email'=>'required|unique:employees|email'
];

Aqui estamos comprobando 3 cosas del email.

  • required -> El campo es obligatorio
  • unique:employee -> El campo debe ser unico en la tabla employee
  • email -> el formato debe ser el de un correo electrónico

Si una de estas validaciones falla se lanza una excepción de error 422. Luego miraremos como trabajamos con eso.

Antes haremos una cosa mas aqui. Agregaremos una función que nos permitira personalizar los mensajes de error. El código seria asi:

public function messages() {
    return [
            'email.required' => 'El correo es requerido',
            'email.unique' => 'El correo debe ser unico',
            'email.email' => 'El formato del correo no es correcto'
        ];
}

Cada mensaje queda personalizado a cada fallo. De esta manera tenemos ya preparado los errores del form requests para el email.

Ahora iremos al controlador de Employee. Debemos agregar al   inicio

use App\Http\Requests\StoreEmployee;

Modificaremos la función create que ahora tenemos :

public function create(Request $request){

}

y lo cambiaremos por ahora así:

public function create(StoreEmployee $request) 
{
    $today  = Carbon::now();
    $unknow = Carbon::createFromFormat('d-m-Y', $request->birthday);

    if ($unknow->diffInYears($today) < 18) {
        return [
            'fecha' => ['El empleado tiene que tener mas de 18 años']
        ];
    }
}

La validación que hemos hecho antes esta en el parámetro de la función. Hemos cambiado Requests por StoreEmployee. De esta manera estamos haciendo la validación que hemos preparado con el requests creado.

Las siguientes lineas son una forma de la validación de edad.

Creamos una  instancia de Carbon (una librería php para trabajar con fechas que viene por defecto en Laravel) con la fecha actual

$today = Carbon::now();

Siguiente paso creamos una instancia de Carbon con la fecha enviada desde el front. Recordemos que hemos configurado el componente para que dicho formato sea dd-mm-yyy y asi se lo estamos diciendo a Carbon.

$unknow = Carbon::createFromFormat('d-m-Y', $request->birthday);

En el if preguntamos si hay 18 años de diferencia entre la fecha actual y la enviada. Si es asi por ahora no hacemos nada pero sino devolvemos un array con un mensaje de error.

Con esto terminamos este post de validaciones.

Código: Github

Proximo post: Mensajes de error en el front

Comparte este artículo

Entra en la discusión y deja tu comentario

Veces