Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Say hello to redesigned Cloudways, an empowering Startup Program, enhanced Staging, a new Let’s Encrypt Wildcard SSL certificate feature, and more. GET STARTED

Master Vue Validation in Laravel and Handle Form Requests Effectively

Updated on December 31, 2018

4 Min Read
vue validation
Reading Time: 4 minutes

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.

Install Npm

Getting started with Vue validation in Laravel, the first step is the installation of Node.js with NPM.

So install NPM first and go to the project’s folder and paste the following command in SSH terminal.

The Routes

Now the next step is to create routes in Vue controller for validation pages like index, store function and others.

You Might Also Like: Understanding Routing in Laravel

The Controller

To create a VueController that handles various logical operation, just copy and paste the below given command:

Store ()

After creating the controller successfully, open it and paste the following code under the store function.

Index ()

Vue Validation View

Once setting up controller function successfully, now it is time to create view files inside the folder resources/views/. Give it a name as vuevalidation-form.blade.php and paste the below given code:

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:

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

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:

  1. first(‘field’): Fetches the first error message associated with that field.
  2. collect(‘field’): Fetches all error messages associated with that field.
  3. has(‘field’): Checks if there are any errors associated with that field.
  4. all(): Gets all error messages.
  5. 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.

Share your opinion in the comment section. COMMENT NOW

Shahroze Nawaz

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

Create Laravel apps without the worry of server management.

Deploy your app on optimized PHP hosting servers for Laravel.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

THERE’S MORE TO READ.