Laravel form validation with Vue.js

Repository used to handle Laravel form validation with Vue.js. Plus point is File Upload Included. Special thanks to MetinSeylan Laravel validation component. Much inspired from there.

Install with NPM

npm i lv-form-validator --save--dev 

Dependencies

• Vue
• Axios

This package is using Axios to make ajax request. Also, behind the scene Vue.use() plugin is working. FormData class of JavaScript is helped to create form object with file upload.

Example

You can pass normal input element by v-model binding. But v-model not supports file_input type.

Here I used custom JavaScript selector to handle file Input type. ID or Class selector of input can be used here.

May example can help: Vue code:

import  LVFormValidator  from  'lv-form-validator';
Vue.use(LVFormValidator);

export default {
    name: 'app',
    data () {
        return {
            form: this.$form({
                title: 'foo',
                // fileOne: '.fileUploadOne', // Element By class Selector
                // fileOne: '#fileUploadOne', // Element By id Selector
            })
        }
    },
    methods: {
        sendForm(){
            this.form.post('http://example.sr/myajax').then((response) => {
                
            }, (response) => {
                
            });
        }
    }
}

Here is the template file:

<template>
    <div>
        <form @submit.prevent="sendForm" autocomplete="off">
            <div class="row">
            
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="title">Title: </label>
                        <input type="text" name="title" class="form-control" v-model="form.$fields.title" id="title" autocorrect="off" />
                        <div  v-if="form.$errors.has('title')" id="titleHelp" class="text-danger"> 
                            <small v-for="error in form.$errors.get('title')">
                                <div>{{error}}</div> 
                            </small> 
                        </div><!-- /#titleHelp -->
                    </div><!-- /.form-group -->
                    
                    <div class="form-group">
                        <label for="picture">File Upload: </label>
                        <input type="file" id="picture" class="picture" />
                        <div v-if="form.$errors.has('picture')" id="pictureHelp" class="text-danger">
                            <div>{{form.$errors.first('fileOne')}}</div> 
                        </div><!-- /#firstHelp -->
                    </div><!-- /.form-group -->
                    
                    <input type="submit" value="Submit" class="btn btn-sm"/>
                </div><!-- /.col-sm-6 -->
            </div><!-- /.row -->
        </form><!-- /form -->
    </div>
</template>

Laravel Validations example:

public function store(Request $request){
    $this->validate($request, [
        'name' => 'required|min:3|max:32',
        'picture' => 'required|image',
    ]);
}

Available Properties

All properies are same as here. Here is one new property to get first message only.

Title	Type	Description
.$busy	Boolean	Flag will true when request sent and will false when request completed
.$errors.get({input})	Array	To get specific fields all errors
.$errors.first({input})	string	To get specific fields first error
.$errors.has({input})	Boolean	To check error key is exist
.$errors.all()	Array	To get all errors
.$fields.{input}	Input	To get raw input value (use in template)
.post(url)	string	To send Laravel POST Request
.put(url)	string	To send Laravel PUT Request
.delete(url)	string	To send Laravel DELETE Request
.get(url)	string	To send Laravel GET Request
.patch(url)	string	To send Laravel PATCH Request

Notes

• Component with create FormData Object and then do request. Means it will use multipart/form-data with every ajax request.
• With every request Component will default send _method parameter to indentify Laravel Routing Request.

That's it. Plugin include Laravel 5.5 and Laravel 5.6 support.