showToast show empty box

Im setting up validations. I use google vision AI to filter out pictuers that doesnt show face. The backend seem ok the showToast appear the form doesnt submit to the DB, but it has no text explaining what the error is. With all other validations It does appear and show text but not for the google one. I tried to log it but it turns up empty so Vue doesnt give much to work with... any ideas?

backend

// Validate image using Google Vision API
if (!$this->validateImage($image_tmp)) {
  return response()->json(['error' => 'Image validation failed'], 422);
 }

Frontend

} catch (error) {
                // Display toast with validation errors
                if (error.response && error.response.status === 422) {
                    const validationErrors = error.response.data.errors;
                    let errorMessage = '';
                    for (const key in validationErrors) {
                        console.log('Current validation error:', validationErrors[key][0]);
                        if (validationErrors[key][0] === 'The :attribute contains profanity words.') {
                            errorMessage += `-> Your input contains profanity words.\n`;
                        } else if (validationErrors[key][0] ===
 'The maximum age must be greater than or equal to the minimum age.') {
                            errorMessage += `-> The maximum age 
must be greater than or equal to the minimum age.\n`;
                        } else if (validationErrors[key][0] === 'Image validation failed') {
                            errorMessage += `-> Image validation failed.\n`;
                            console.log('Updated errorMessage:', errorMessage);
                        }else {
                            errorMessage += `-> ${validationErrors[key][0]}\n`;
                        }
                    }
                    await showToast(errorMessage);
                } else {
                    console.error('Error submitting form:', error);
                }
            }
        };

        // Method to display toast with validation errors
        const showToast = async (message) => {
            const toast = await toastController.create({
                message: message,
                position: 'top',
                duration: 5000, // Duration in milliseconds
                color: 'danger' // Customize color
            });
            await toast.present();
        };

karu

2 years ago

Level 1

SOLVED

added this

} catch (error) {
                console.log(error.response.data);  // This
                // Define a mapping object for validation error messages
                const errorMappings = {
                    'The :attribute contains profanity words.': 'Your input contains profanity words.',
                    'The maximum age must be greater than or equal to the minimum age.': 'The maximum age must be greater than or equal to the minimum age.',
                };

                // Display toast with validation errors
                if (error.response && error.response.status === 422) {
                    const validationErrors = error.response.data.errors;
                    let errorMessage = '';
                    for (const key in validationErrors) {
                        const errorMessageFromMap = errorMappings[validationErrors[key][0]];
                        if (errorMessageFromMap) {
                            errorMessage += `-> ${errorMessageFromMap}\n`;
                        } else {
                            errorMessage += `-> ${validationErrors[key][0]}\n`;
                        }
                    }
                    // Add the message from console.log(error.response.data)
                    errorMessage += `-> ${error.response.data.error}\n`; // and this
                    await showToast(errorMessage);
                } else {
                    console.error('Error submitting form:', error);
                }
            }
´´´

Please or to participate in this conversation.