Skip to content

β˜‘οΈ Add your Laravel validation errors straight to the error bag 😎

Notifications You must be signed in to change notification settings

pmochine/vee-validate-laravel

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

19 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ™Œ VeeValidate with Laravel validation errors

Latest Version on NPM Total Downloads on NPM Software License

VeeValidate with Laravel validation

If you are looking for an easy module for showing Laravel validation errors, this package is for you. 😜

*Prerequisites: vue >= 2.0.0 and vee-validate >= 2.1.0

⚠️ Combine this package with a global axios interceptor to get the most of it

Installation in 2 Steps*

1: Install the package πŸ’» on NPM

npm i @pmochine/vee-validate-laravel

2: Add the package in your main.js

import Vue from 'vue';
import VeeValidate from 'vee-validate';
import VeeValidateLaravel from '@pmochine/vee-validate-laravel';

Vue.use(VeeValidate);
Vue.use(VeeValidateLaravel);

πŸ’ͺ How to use it

Somewhere in Laravel:

$request->validate([
    'name' => 'required|min:3|max:255'
]);

Somewhere in Vue:

<template>
    <div class="form-group" v-bind:class="{'has-error' : errors.has('name')}">
        <label for="name">Name</label>
        <input 
            type="text" 
            name="name"
            class="form-control"
            v-model="name"
            v-validate="'required'" />
        <div v-show="errors.has('name')" class="help-block">{{ errors.first('name') }}</div>
    </div>
</template>

<script>
    export default {
        methods: {
            doValidation() {
                const data = {
                    name: this.name
                };
            
                axios.post('/example', data)
                    .then(res => {})
                    .catch(err => {
                        //adds errors to vee-validate errorBag and returns the errors as object
                        const errors = this.$addLaravelErrors(err.response);

                        if(errors){
                            alert(errors[Object.keys(errors)[0]]); 
                        }
                    });
            }
        }
    }
</script>

Security

If you discover any security related issues, please don't email me. I'm afraid 😱. [email protected]

Credits

Now comes the best part! 😍

Oh come on. You read everything?? If you liked it so far, hit the ⭐️ button to give me a 🀩 face.

About

β˜‘οΈ Add your Laravel validation errors straight to the error bag 😎

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%