未加星标

Real-time Unique Input Validation with VueJS and Laravel

字体大小 | |
[开发(php) 所属分类 开发(php) | 发布者 店小二03 | 时间 2019 | 作者 红领巾 ] 0人收藏点击收藏
Real-time Unique Input Validation with VueJS andLaravel

Josh Krawczyk


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 Conroller

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 APIfile

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 1 ― Laravel Passport and Hyn\Tenancy

Part 2 ― VueJS and Laravel API

Part 2.5 ― VueJS and Laravel Auth

Part 3 ― Laravel Multi-Tenant Testing

本文开发(php)相关术语:php代码审计工具 php开发工程师 移动开发者大会 移动互联网开发 web开发工程师 软件开发流程 软件开发工程师

代码区博客精选文章
分页:12
转载请注明
本文标题:Real-time Unique Input Validation with VueJS and Laravel
本站链接:https://www.codesec.net/view/628190.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 开发(php) | 评论(0) | 阅读(128)