Skip to content

ilya-nurullin/Vue-Laravel-Validator

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue Laravel Validator

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

#install

npm i vue-laravel-validator --save

##Usage javascript file

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

Vue.use(VueResource);
Vue.use(LaravelValidator);

new Vue({
  data(){
    return {
      form: this.$form({
          'user': null, // or Vuex this.user.name eg.
          'age': null,
          'email': null
      })
    }
  },
  methods:{
    sendform(){
      this.form.post('http://yourlaravel.com/api/save').then((response) => {
        console.log('success')
      }, (response) => {
        console.log('error')
      })
    }
  }
});

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.$fields.name">
    <div if="form.$errors.has('name')" class="form-control-feedback">{{form.$errors.get('name')}}</div>
  </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>
  
  <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.$fields.email">
    <div if="form.$errors.has('email')" class="form-control-feedback">{{form.$errors.get('email')}}</div>
  </div>
  
  <button :disabled="form.$busy" type="submit" class="btn btn-primary">Save</button>
  
</form>

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

About

Laravel validation error handler for vuejs

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%