vue js laravel validation Vee Validate

 

Vee Validate for Laravel backend validation

Simple vue js plugin that makes it easier to show validation errors from Laravel validation by using vee-validate.

Getting Started

In your script entry point:

import Vue from 'vue';
import VeeValidate from 'vee-validate';
import VeeValidateLaravel from 'vee-validate-laravel';
 
Vue.use(VeeValidate);
Vue.use(VeeValidateLaravel);
 

From Laravel:

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

In Vue classes:

 
<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 => {
                    this.$setLaravelValidationErrorsFromResponse(err.response.data);
                });
            }
        }
    }
</script>
 

https://www.npmjs.com/package/vee-validate-laravel

https://www.npmjs.com/package/vee-validate-laravel-extended