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

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
You might also like...
Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api
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)

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

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

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

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

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

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

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

Simple and easy Vue directive for form validation.
Simple and easy Vue directive for form validation.

Simple and easy Vue.js directive for form validation.

Simple Vue.js form validation library

Simple Vue.js form validation library

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

Comments
  • Example with Vuex.

    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

    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

    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
Owner
Metin Seylan
@google Developer Expert - Cloud, Microservices
Metin Seylan
A simple way to handle Laravel back-end validation in Vue 2.

vform A simple way to handle Laravel back-end validation in Vue. Inspired from Laravel Spark. Installation npm i axios vform Usage See the included ex

Cretu Eusebiu 605 Dec 27, 2022
Vue data validation rules, very much inspired from Laravel validation

A Vue plugin that provides out-of-the-box data validation rules, very much inspired from Laravel validation system. Installation npm i @primitivesocia

Primitive. 15 Apr 13, 2022
A useful form validator for VueJS framework

vuejs-easy-validator A useful form validator for VueJS framework Introduction Suppose you work with VueJS framework. Imagine a form with a lot of fiel

Hervé Perchec 0 Nov 27, 2018
Form Validation in Vue3 with TypeScript along with vuelidate for the validation

Vue3 with typescript Form Validation in Vue3 with vuelidate library Node Version Used: v14.17.3 Library Used for the validation: Vuelidate 2 Demo Link

Sandeep Kumar Mandal 4 Oct 10, 2022
Vue data validator - Easiness, simplicity, accurate

Overview This is a Vue data validator, trying to cover all needs and built on top of ES6 to achieve the best architecture. Demo You can view a demo an

null 30 Dec 8, 2021
Sirius Validation - stand-alone JS library for data validation in Node and browsers.

SiriusJS Validation Sirius Validation is stand-alone JS library for data validation in Node and browsers. It offers: 23 build-in validation rules. The

Adrian Miu 1 Mar 24, 2020
Laravel frontend validator

An easy way to validate forms using backend logic.

Chantouch Sek 7 Sep 8, 2021
Simple Vuex module to handle form fields and validations

vuex-module-validatable-state Simple Vuex module to handle form fields and validations. You can build a view model for your form, which runs valdation

Indiegogo 10 Mar 31, 2022
A Vue.js directive for sending data from form and primitive validation

Vue Form Send A Vue.js directive for sending data from form and primitive validation inputs Installation npm i --save-dev vue-form-send import VueForm

Aleksey Pleshkov 3 Apr 13, 2022
A simple yet flexible validator library for vue.js

Simple Vue Validator Simple Vue validator is a lightweight yet flexible plugin for Vue.js 2.0 that allows you to validate input fields, and display er

semisleep 294 Dec 27, 2022