Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data

Metin Seylan

Last update: Aug 23, 2022

Related tags

Form Validation Vue-Laravel-Validator

Overview

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">Namelabel>
    <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">Agelabel>
    <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">Emaillabel>
    <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">Savebutton>
  
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

Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api

Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api. (Form Api, Validator Api, Rules Api, Error Messages Api)

41 Jul 10, 2022

Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

1 May 7, 2019

Vue validator

vue-validator 3.8k before gzipped Install Note: the "vue-validator" on NPM refers to https://github.com/kazupon/vue-validator. $ npm install --save @j

1 Feb 22, 2018

RawModel.js plugin for Vue.js v2. Form validation has never been easier!

vue-rawmodel RawModel.js plugin for Vue.js v2. Form validation has never been easier! This plugin integrates RawModel.js framework into your Vue.js ap

81 Nov 24, 2022

Vue props validation logic extracted for nested validation in object and arrays.

vue-props-validation Vue props validation logic extracted for nested validation in object and arrays. Install npm install vue-props-validation Usage Y

21 Feb 28, 2022

Lite-validator.js - 轻量级的验证工具类，做纯数据验证，不操作相关DOM与事件注册，规则配置方便，简单易用

lite-validator.js 轻量级的验证工具类，做纯数据验证，不操作相关DOM与事件注册，规则配置方便，简单易用依赖ES6的 Promise，如果需要低版本浏览器支持，请使用 dist/lite-validator.js 安装 npm install lite-validator --sa

10 Mar 26, 2021

Simple and easy Vue directive for form validation.

Simple and easy Vue.js directive for form validation.

0 Feb 15, 2021

Simple Vue.js form validation library

0 Mar 1, 2020

Deadly simple form validation for Vue.js

vue-form-validator Deadly simple form validation for Vue.js. Features: Built in data types, including email, number, domain, url, etc. Customizable va

10 Aug 28, 2018

Example with Vuex.
Hello, once again

I would like to see more complex example with Vue2.0 and Vuex 2.0,

I can't manage to pass values from vuex to form.

Lets assume i have store with user.

this.$store.state.user = { email: 'email', name: 'name' }

How should i get user state to form

data() { return { form: this.$form({ email: '', // What should be written here? name: '' }) } }
opened by san4io 3
Clear errors with every new request

Hey, I think it would be nice if all errors would disappear during every new request, because if we had request with errors and moment later successful request, old errors still shown. I'll make pull request to fix that.

opened by san4io 0
How to use array input
Hello author,

it is great to have this wonderful library I just can not figure out how to use array input

for example

<input name="options[options1]" type="text">

I did try

form: this.$form({ options: { option1: '', } }),

but it is not working

Thank You,
opened by RushabhJoshi 0