Skip to content
JS package that will handle your Laravel errors and automatically inject them into a VeeValidate instance
JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Updated for ES2016 importz Oct 10, 2019
.gitignore
LICENSE
README.md Merge branch 'master' of https://github.com/Sammyjo20/laravel-veevali… Jul 28, 2019
index.js Updated for ES2016 importz Oct 10, 2019
package.json Updated for ES2016 importz Oct 10, 2019
yarn.lock First commit 🎉 Feb 25, 2019

README.md

🚨 Laravel VeeValidate

The super simple JS package that will handle your Laravel errors and automatically inject them into a VeeValidate instance

Example Image

Installation

npm i laravel-veevalidate

or

yarn add laravel-veevalidate

Usage

Assuming you already have VeeValidate installed, you can use Laravel VeeValidate as a Vue Prototype.

import LaravelValidator from 'laravel-veevalidate';

Vue.prototype.$laravelValidator = LaravelValidator;

Alternatively, you can use it on a on a component-to-component basis.

import LaravelValidator from 'laravel-veevalidate';

Using it from with Axios

To use the error handler with Axios, you will need to place the handleError method inside of the catch() block of the Axios promise.

The first parameter you must provide is the VeeValidate instance you would like to use. It's recommended to use the global directive ($validator). The second parameter is the response callback which Axios provides.

axios(...)
    .catch(error_response => {
       this.$laravelValidator.handleError(this.$validator, error_response) 
    })

Using it with Fetch

To use the error handler with Fetch, you will need to place the handleFetchError method inside of the then() block of the Fetch promise.

The first parameter you must provide is the VeeValidate instance you would like to use. It's recommended to use the global directive ($validator). The second parameter is the response callback which Fetch provides.

fetch(...)
    .then(response => {
       this.$laravelValidator.handleFetchError(this.$validator, response) 
    })

Clearing Errors

Important: Laravel VeeValidate does not clear your VeeValidate errors. Before your request you should clear the error bag from your VeeValidate Instance:

// e.g: 
this.$validator.errors.clear();

Custom field mapping

Sometimes your Request/Eloquent attributes won't match your VeeValidate fields/names. You can really easily "map" this by passing a key value object as a third parameter.

    // Axios
    this.$laravelValidator.handleError(this.$validator, error_response, {
           'email_address': 'email address', // Attribute => Field Name
       }) 
    })
    
    // Fetch
    this.$laravelValidator.handleFetchError(this.$validator, response, {
           'email_address': 'email address', // Attribute => Field Name
       }) 
    })

Options

Laravel VeeValidate provides some simple options which you can pass as the fourth parameter of the handleError and handleFetchError methods.

Option Description Type Default Value Choices
driver Request driver you are using. String axios axios fetch
show_errors Display console errors while in Development mode Boolean true true false

Applying an option

this.$laravelValidator.handleError(this.$validator, error_response, {}, {
    show_errors: false
}) 

And that's it!

This is my first JS/NPM package, I really hope it's been useful to you, if you like my work and want to show some love, consider buying me some coding fuel (Coffee) ❤

https://ko-fi.com/sammyjo20

You can’t perform that action at this time.