Real-time Unique Input Validation with VueJS and Laravel

I have recently run into a problem where I needed to validate the uniqueness of a text input real-time. This is pretty common in registration forms when you need to create a username. It would be pretty annoying for the user to have to constantly submit the form to see if their input will be accepted. This is where server-side validation comes into play.

In my project I am already utilizing Vuetify and VeeValidate so I will craft my solution around that. The concepts discussed here can be used with other packages, but might take some tinkering.

I will be using my demo project from a series I am making about multi-tenant web applications. You can find the link to Part 1 of the series and the github repo below.

sadnub/laravel-tenancy-passport-demo

Laravel demo with Passport and Tenancy. Contribute to sadnub/laravel-tenancy-passport-demo development by creating an…

github.com

Laravel Passport and Hyn\Tenancy — Part 1

This is the post you have all been waiting for. I have been working on building my SaaS application for three months…

medium.com

Now to the good stuff!

---

So in this particular application, each tenant registers a sub-domain that will get them to their own dashboard. This sub-domain is selected during registration and needs to be unique. So the goal is to allow them to see real-time if the value that they inputted will work or not. This will be accomplished using an API endpoint that simply checks the database for the value. If the value exists false is return and vice versa.

As metioned, I will be using the VeeValidate package for validation. Check out the documentation!

VeeValidate

Template Based Validation Framework for Vue.js

baianat.github.io

Vuetify is great for UI components and takes much of the leg work out of development. Check out the docs!

Quick Start - Vuetify.js

Get started with Vue and Vuetify in no time. Support for vue-cli-3, existing projects and more.

vuetifyjs.com

VeeValidate Configuration

Using this package is pretty easy. You just have to add it as a plugin and configure some options. Here is my app.js file.

The inject: false configuration is needed because we will be adding validation errors outside of Vue. I will share my axios configuration a little later explaining this. We just need to remember to inject the root $validator instance in our components that need to validate fields. Check the docs for more info on that.

API Endpoint

For this part I created an API post route that calls a method in the Registration Controller. Pretty standard stuff.

Registration Controller

The checkDomain method will append the tenant URL to the request and then run it through a validator checking for uniqueness. If the validation fails a 422 response will be sent back with a validation message. I have an axios interceptor that catches these 422 messages and adds them to the VeeValidate error bag so we don’t have to worry about processing these.

When the validation succeeds, a json response is sent back in a format that VeeValidate expects.

Here is the axios interceptor I am using. It needs the Vue root instance to add the validation errors so make sure to do export const vm = new Vue() so you can import it.

Auth API file

I am adding a function to our api.js file for checking the domain. This is the file we can import into our components.

Registration Page

This is where all of the validation logic will sit. If you need to use the same logic in other parts of your app you can move it to your app.js file.

There is a function called isUnique that is called every time validation is triggered. Then we use the Validator.extend() method to create a new validation rule. We can then specify this validation rule on the field. I specify all of this in the mounted() hook.

Take a look at the fqdn field. The unique rule is added and there is some logic that switches the icon depending on validation state. I am using the Vuetify v-text-field append slot to place the icon within the input. Then we can use v-if statements to render the correct icon. Finally I am using the VeeValidate data-vv-delay property to limit the amount of validations to 1 per 500ms. This will take some of the load off of our API.

Wrapping up

And now you have a fully functional solution to validate the uniqueness of data in real-time! Your users will really appreciate it.

Hopefully this helped you out! If you have any questions, comments, suggestions please let me know down in the comments.

Check out some of my other articles below!

Part 0 — Laravel Multi-Tenant App Setup

Part 1 — Laravel Passport and Hyn\Tenancy

Part 2 — VueJS and Laravel API

Part 3 — Laravel Multi-Tenant Testing