How to Display Validation Error Message in Laravel Vue JS

Websolutionstuff | Mar-08-2024 | Categories : Laravel VueJs

Hey folks, are you ready to make your Laravel Vue.js application even more user-friendly by implementing validation error messages? Well, you're in luck because I'm here to guide you through the process in a simple and easy-to-follow manner.

In this guide, I'll walk you through each step of displaying validation error messages in your Laravel Vue.js application.

So, let's see how to display validation error messages in laravel vue js, vue js display error message, how to display laravel validation errors, vue js validation, and vue js validation errors.

Step 1: Set Up Laravel Backend Validation

First things, let's set up validation rules for your form in Laravel. Open up your Laravel project and navigate to the controller method responsible for handling form submissions.

Inside this method, use Laravel's validation functionality to define rules for your form fields. For example:

public function store(Request $request)
{
    $validatedData = $request->validate([
        'name' => 'required|string|max:255',
        'email' => 'required|email|unique:users,email',
        'password' => 'required|string|min:8',
        // Add more validation rules as needed
    ]);
    
    // Logic to save data goes here
}

Step 2: Create Route

Now, we'll define the route in the api.php file.

routes/api.php

use App\Http\Controllers\Api\UserController;
 
Route::post('/users', [UserController::class, 'store']);

Step 3: Handle Validation Errors in Vue.js Component

Now, let's handle the validation errors in your Vue.js component.

resources/views/welcome.blade.php

@extends('layouts.app')

@section('content')
    <div id="app">
        <FormComponent></FormComponent>
    </div>
@endsection

resources/js/components/FormComponent.vue

<template>
    <div>
        <!-- Form HTML goes here -->
        <form @submit.prevent="submitForm">
            <input type="text" v-model="formData.name" placeholder="Name">
            <span class="text-red-600" v-if="errors?.name">{{ errors.name[0] }}</span>

            <input type="email" v-model="formData.email" placeholder="Email">
            <span class="text-red-600" v-if="errors?.email">{{ errors.email[0] }}</span>

            <input type="password" v-model="formData.password" placeholder="Password">
            <span class="text-red-600" v-if="errors?.password">{{ errors.password[0] }}</span>

            <button type="submit">Submit</button>
        </form>
        
    </div>
</template>

<script>
export default {
    name:"FormComponent",
    data() {
        return {
            formData: {
                name: '',
                email: '',
                password: '',
            },
            errors: {},
        };
    },
    methods: {
        submitForm() {
            axios.post('/api/users', this.formData)
                .then(response => {
                    // Handle success
                })
                .catch(error => {
                    if (error.response.status === 422) {
                        this.errors = error.response.data.errors;
                    }
                });
        },
    },
};
</script>

Conclusion:

And there you have it! You've successfully learned how to display validation error messages in your Laravel Vue.js application. By following these steps, you can create a seamless user experience with real-time feedback for form validation errors.

You might also like: