Cuando trato de detectar mis errores de validación de Laravel usando javascript, me sigue dando los datos en formato html en lugar de en formato json, mi validación parece normal. tenga en cuenta que estoy usando vue.js 3 y si la validación pasa el método real en el controlador funciona bien, esto es solo un problema de captura de validación.
$request->validate([ 'first_name' => ['required', 'string', 'min:3', 'max:255'], 'last_name' => ['required', 'string', 'min:3', 'max:255'], 'email' => ['required', 'email', 'min:3', 'max:255'], 'message' => ['required', 'string', 'min:3'] ]);mi método de búsqueda es el siguiente:
fetch('/contact-us', { method: 'POST', headers: { 'CONTENT-TYPE': 'application/json' }, body: JSON.stringify(this.form) }).then((response) => response.text()) .then((data) => { console.log(data); //data = JSON.parse(data); }).catch(function(error) { console.log('Error: ' + error); });mi ruta web es:
Route::post('/contact-us', [IndexController::class, 'contactForm']);el error en formato html es:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link href="/css/app.css" rel="stylesheet" /> <script src="/js/app.js" defer></script> </head> <body> <style> body{ margin: 0 !important; overflow-x: hidden; } .container { padding-top: 20px; } </style> <div id="app" data-page="{"component":"ContactUs","props":{"errors":{"email":"The email must be a valid email address."},"csrf":"tFYwkcZZhNfeb2WXDwdnSv4dchujDvSvLfFGhHW1"},"url":"\/contact-us","version":"0f4e2ee0f7e2ca9da665d2f8035743df"}"></div></body>Los días de la documentación de laravel, la respuesta recibe un 422 que arroja un error en el bloque de captura de errores habitual. Estos datos se pueden extraer agregando este error de captura a su solicitud de publicación json
.catch(error => { if (error.response.data.errors) { console.log(error.response.data.errors); } });Si la validación falla durante una solicitud HTTP tradicional, se generará una respuesta de redireccionamiento a la URL anterior.
Si la solicitud entrante es una solicitud XHR, se devolverá una respuesta JSON que contiene los mensajes de error de validación.
Primero, supongo que /contact-us es una ruta web y no una ruta API.
El comportamiento predeterminado de $request->validate() en caso de falla es redirigirte a la ruta web anterior con MessageBag .
Para evitar ese comportamiento predeterminado, debe envolver el proceso de validación en un bloque try-catch y capturar la excepción Illuminate\Validation\ValidationException y devolver mensajes de error de [IndexController::class, 'contactForm'] .
La matriz de mensajes de error se convertirá automáticamente en una respuesta JSON.
try { $request->validate([ 'first_name' => ['required', 'string', 'min:3', 'max:255'], 'last_name' => ['required', 'string', 'min:3', 'max:255'], 'email' => ['required', 'email', 'min:3', 'max:255'], 'message' => ['required', 'string', 'min:3'] ]); } catch (\Illuminate\Validation\ValidationException $th) { return $th->validator->errors(); }Ejemplo de respuesta:
{ "first_name": [ "first name field is required." ], "last_name": [ "last name field is required." ], "email": [ "L'E-mail field is required." ], "message": [ "message field is required." ] }