Laravel5 + Vue + VeeValidate

CoreFormRequest.php

<?php
//All your form requests need to extend the coreFormRequest.
class CoreFormRequest extends FormRequest {

    protected $failed = [];

    /**
     * Add a field with detailed information about failed fields.
     * @param \Illuminate\Contracts\Validation\Validator
     */
    public function withValidator($validator)
    {
        $validator->after(function ($validator) {
            $errors = $validator->errors()->getMessages();
            $obj = $validator->failed();
            foreach($obj as $input => $rules) {
                $i = 0;
                $fail = [];
                foreach($rules as $rule => $ruleInfo){
                    $key = $rule;
                    $fieldParts = explode(".", $input);
                    $clientInput = $fieldParts[0];

                    if(count($fieldParts) > 1) {
                        $clientInput = $fieldParts[0].'['.$fieldParts[1].']';
                    }

                    $fail = [
                        'rule' => strtolower($rule),
                        'field' => $clientInput,
                        'msg' => $errors[$input][$i]
                    ];
                    $i++;
                }
                $this->failed[] = $fail;
            }
        });
    }
}

Example.md

Example usage:

In your forms: Note: You need to add the formValidation.js as a mixin to your component.

{{ collectErr('email') }}

In your module files of vuex you need to commit the FORM_ERROR type. async STORE_ARTICLE({dispatch,commit}, data) { try { const response = await article.store(data).then((response) => { commit(STORE_ARTICLE, response.data.data) commit(SUCCESS, response.data.meta.msg) }) } catch(err) { if(err.response.status == 422) { commit(FORM_ERROR, err.response.data) //IMPORTANT! } } },

form-validation.js

//Note: The Error array of veeValidate is veeErrors.


import {mapGetters} from 'vuex'
import {CLEAR_FORM_ERRORS, ERROR} from '../vuex/types'
export default {
    data () {
        return {
            errors: [],
            //add more rules, which should be display from backend validation. All other rules will not be added.
            keepServerErrors: ['unique', 'boolean', 'exists', 'regular_chars', 'identifier', 'date'],
        }
    },
    mounted() {
        Object.keys(this.fields).map(field => {
            Vue.set(this.errors, field, undefined)
        })
    },
    computed: {
        ...mapGetters([
            'formErrors',
        ]),
    },
    methods: {
        hasServerFormErrors() {
            if(this.formErrors.length == 0) {
                return false
            }
            return true
        },
        resetFormErrors() {
            this.$store.dispatch(CLEAR_FORM_ERRORS).then(() => {
                this.errors = []
                this.$validator.errors.clear()
            })
        },
        addServerErrors() {
            if(this.formErrors.hasOwnProperty(0)) {
                this.formErrors[0].map(failed => {
                let field = failed.field
                if(this.fields.hasOwnProperty(field)) {
                    if(this.keepServerErrors.indexOf(failed.rule) != -1) {
                        this.errors[field] = failed.msg
                        this.fields[field].valid = false
                        this.fields[field].invalid = true
                    }
                }
            })
            }
        },
        collectErr(key) {
            if(this.errors[key] !== undefined) {
                return this.errors[key]
            }
            return undefined
        },
        hasError(key) {
            if(this.errors[key] !== undefined) {
                return true
            }
            return false
        },
    },
    watch: {
        veeErrors: {
            handler: function(val, oldVal) {
                    this.errors = []
                    val.items.map(err => {
                        if(this.fields.hasOwnProperty(err.field) != -1) {
                            this.errors[err.field] = err.msg
                        }
                    })
                    this.addServerErrors()
                    
            },
            deep: true
        },
        formErrors: {
            handler: function() {
                this.errors = []
                this.addServerErrors()
            }
        }
     }
}

formerrors.js

import {FORM_ERROR, CLEAR_FORM_ERRORS} from '../types';

const state = {
   formErrors: []
};

const getters = {
  formErrors: state => state.formErrors
};

const mutations = {
   FORM_ERROR(state, data) {
      state.formErrors = data.errors.details
   },
   CLEAR_FORM_ERRORS(state) {
    state.formErrors = []
   }
};
const actions = {
  FORM_ERROR({commit}, param) {
     commit(WARNING, param)
  },
  CLEAR_FORM_ERRORS({commit}) {
    commit(CLEAR_FORM_ERRORS)
  }
};

export default {
  state,
  getters,
  mutations,
  actions,
}