Laravel Validation Error Handler for Vuejs

Vue Laravel Validator

This plugin handle laravel validation response and simple creating form and posting data.


npm i vue-laravel-validator --save

##Usage javascript file

import Vue from 'vue';
import VueResource from 'vue-resource';
import LaravelValidator from 'vue-laravel-validator';


new Vue({
    return {
      form: this.$form({
          'user': null, // or Vuex eg.
          'age': null,
          'email': null
    sendform(){'').then((response) => {
      }, (response) => {

template file

<form @submit.prevent="sendForm">

  <div class="form-group" :class="{'has-danger': form.$errors.has('name')}">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" placeholder="Name" v-model="form.$">
    <div if="form.$errors.has('name')" class="form-control-feedback">{{form.$errors.get('name')}}</div>

  <div class="form-group" :class="{'has-danger': form.$errors.has('age')}">
    <label for="age">Age</label>
    <input type="text" class="form-control" id="age" placeholder="age" v-model="form.$fields.age">
    <div if="form.$errors.has('age')" class="form-control-feedback">{{form.$errors.get('age')}}</div>

  <div class="form-group" :class="{'has-danger': form.$errors.has('email')}">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email" placeholder="email" v-model="form.$">
    <div if="form.$errors.has('email')" class="form-control-feedback">{{form.$errors.get('email')}}</div>

  <button :disabled="form.$busy" type="submit" class="btn btn-primary">Save</button>


Laravel Validation

public function save(Request $request){
  $this->validate($request, [
    'name' => 'required|min:3|max:32',
    'age' => 'required|numeric|max:99|min:18',
    'email' => 'required|email'

Available Properties

Title Type Description
.$busy Boolean form proccess status (use loading animation eg.)
.$errors.get({input}) `Array String`
.$errors.has({input}) Boolean get input has error
.$errors.all() `Array String`
.$fields.{input} Input get raw input value (use in template)
.post(uri) string Vue-resource post method
.put(uri) string Vue-resource put method
.delete(url) string Vue-resource delete method

Download Details:

Author: MetinSeylan


Source Code:

#vue #vuejs #javascript

Laravel Validation Error Handler for Vuejs
4.75 GEEK