Master Vue Validation in Laravel and Handle Form Requests Effectively

Laravel is an advanced PHP framework built perfectly for web artisans. It helps creating robust APIs and optimized web applications. Further, the framework is very developer friendly as it provides different features to ease out various functional operations.

Handling request validation is one of the most important part of any web application. Many of us know that there are multiple ways to validate request in Laravel, in which one is the very popular with Vue validation.

On the other side, VueJS is increasingly getting popular among the front end community not because of its impressive functionalities, but because of its official support with Laravel as well.

While building an interactive web application, one most important thing for developers to take care of is the form validation. You can either apply form validation yourself, or could use some plugins to do the job.

So in this tutorial, I will demonstrate how to validate data in Laravel using Vue validation.

Prerequisites

For the purpose of this VueJS form validation tutorial, I assume that you have a Laravel application installed on a web server. My setup is:

Laravel 5.5

PHP 7.x

MySQL

Npm

For optimized developer stack, I have installed my Laravel application on a Cloudways managed server which is regarded as a perfect platform for hosting Laravel project. You can also sign up for a free Cloudways account easily and can setup your application within few minutes.

Once pasting the above code, run the application in preferred browser and check validation.

Vue Validation Plugins

If you don’t like setting up validation manually, there are also some pre-made VueJS form validation plugins available in the market which could save your time and ease out several operations.

Since there are many validation plugins available out there, I recommend you to choose anyone from the given below:

Vue-validator:

Developed by Kazuya Kawaguchi, Vue Validator is the most popular one and is developed by the core members of VueJS. But it is not compatible with Vue 2 as of yet.

Vue-form-generator:

This is also one of the great plugin in VueJS form validation stack, as it also builds interactive forms along with validation.

Vee-validate:

Vee-validate is new module for validation but its compatibility with Vue1 and Vue2 makes it a much better choice for validation as of yet. This Vue validator plugin is very handy for the developers and thus I will be using this in the below tutorial also.

Vee-Validate

This VueJS form validation plugin is very lightweight and allows you to easily validate input fields. Using it doesn’t require anything fancy, as all the work goes with HTML and is quite easy. You just have to specify type of validation for each input, as what value changes should occur with the validation. You will then get the notification of each occurring errors in the field.

While most of the time validations are configured to occur automatically, however you can use customized validation in specific places also. The validator object is a standalone object and has no dependencies.

This Vue validator plugin has currently 20 validation rules and works pretty same like Laravel’s validation syntax.

Installation

Vee-validate is only available on NPM currently, but it is expected to move forward soon.

So to get the compatible plugin version of Vue 2, I have to execute the following command:

1

npm install vee-validate@next--save

Then, I will authorize Vue to use it in my JavaScript.

1

2

3

4

5

import Vue from'vue';

import VeeValidate from'vee-validate';

Vue.use(VeeValidate);

Basic Example Form Validation

Now to validate an input, attach v-validate directive and define validation rules inside the data-rules attribute.

Errors

Notice here, that error object is used to check errors in input and notify the developers about it. It is created automatically by plugin and you can change its name whenever is needed.

The error object provides you few methods to render errors:

first(‘field’): Fetches the first error message associated with that field.

collect(‘field’): Fetches all error messages associated with that field.

has(‘field’): Checks if there are any errors associated with that field.

all(): Gets all error messages.

any(): Checks if there are any errors.

Conclusion

So in this article, i have demonstrated in detail how to validate data in Laravel using the Vue validation. The article covers two methods of validating data with Vue, one is the manual process and the other one is through premade plugins. It is up to you which one suits your validation demands.

If you still have more questions about this article, do write your queries below in the comments section.

Shahroze is a PHP Community Manager at Cloudways - A Managed PHP Hosting Platform. He’s always in search of new frameworks and methods to implement them. Besides his coding life, he loves movies and playing soccer with friends. You can email him at shahroze.nawaz@cloudways.com