How to Setup Form Validation in Vue 3 using VeeValidate

This is a quick example of how to setup form validation in Vue 3 using VeeValidate.

VeeValidate is a library for building, validating and handling forms in Vue.js. VeeValidate 4 was recently released and is compatible with Vue 3, the official docs are available at

The example is a simple registration form with pretty standard fields for title, first name, last name, date of birth, email, password, confirm password and an accept terms and conditions checkbox. All fields are required including the checkbox, the dob must be a valid date, the email address must be in a valid format, the password field must have a min length of 6, and the confirm password and password fields must match.

Styling of the example is all done with Bootstrap 4.5 CSS, for more info see

Vue 3 + VeeValidate Form Validation App Component

The app component template contains the form with all of the input fields and validation messages. The form and fields are built with the VeeValidate <Form /> and <Field /> components which automatically hook into the validation rules (schema) based on the name of the field.

The form calls the onSubmit() method when the form is submitted and valid. Validation rules are bound to the form with the validation-schema prop, and validation errors are provided to the form template via the scoped slot v-slot="{ errors }".

The app component code defines the form validation rules with the Yup schema validation library which VeeValidate supports out of the box, for more info on Yup see

The onSubmit() method is called when the form is valid and submitted, and simply displays the contents of the form in a javascript alert.

#vue #javascript #web-development #programming #developer

What is GEEK

Buddha Community

How to Setup Form Validation in Vue 3 using VeeValidate
Luna  Mosciski

Luna Mosciski


8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Yogi Gurjar


Laravel 8 Form Validation Tutorial

Laravel 8 form validation example. In this tutorial, i will show you how to submit form with validation in laravel 8.

And you will learn how to store form data in laravel 8. Also validate form data before store to db.

How to Validate Form Data in Laravel 8

  1. Step 1 – Install Laravel 8 Application
  2. Step 2 – Configuring Database using Env File
  3. Step 3 – Create Model & Migration File For Form
  4. Step 4 – Create Routes
  5. Step 5 – Creating Controller
  6. Step 6 – Create Blade File For Form
  7. Step 7 – Start Development Server
  8. Step 8 – Run Laravel 8 Form Validation App On Browser

#laravel 8 form validation #laravel 8 form validation tutorial #laravel 8 form validation - google search #how to validate form data in laravel 8 #form validation in laravel 8

Vue.js Form Validation example with VeeValidate » grokonez

Vue.js Form Validation example with VeeValidate

In this tutorial, we’re gonna make a Vuejs Form Validation example with VeeValidate.

Example Overview

Our form has 3 fields: - Username: check existence - Email: check existence, then check email format - Password: check existence, then check if at least 6 characters vue-form-validation-demo


Add VeeValidate to Vue Project

- with npm npm install vee-validate
  • with yarn
    yarn add vee-validate

package.json after installation:

  "name": "vue-form-validation",
  "dependencies": {
    "vee-validate": "^2.1.1",
    "vue": "^2.5.17"

Use VeeValidate


import Vue from "vue";
import App from "./App.vue";
import VeeValidate from "vee-validate";


new Vue({
render: h => h(App),

Form Validation Component

We use v-validate directive for input tag we want to validate (make sure that it has a name attribute -> for error messages).

More at:

Vue.js Form Validation example with VeeValidate

#vue #form #veevalidate #validation

Laravel 8 Form Validation Example

In this tutorial we will see laravel 8 form validation example, form validation in laravel is very common functionalities and it is use in each and every website to validate form field.

Here, We will use has function in session to check error message in laravel 8. using this example you can check simple form validation as well as you can create your own custom validation in laravel 8.

Laravel 8 Form Validation Example

Read Also : Laravel 8 CRUD Operation Example

#laravel 8 form validation example #form validation #how to validate form in laravel 8 #form validation in laravel #laravel #laravel8

10 Best Vue Validate Component for Vue.js App

Vue validate component allows you to validate inputs and display errors. Here are 10 vue validate components for your vue.js application.

1. vue-nocaptcha

Aliyun No-Captcha on Vue.

What this do

  • Use Aliyun noCAPTCHA in Vue
  • Use noCAPTCHA locally, load fast!
  • Support both Desktop and H5 noCAPTCHA
  • Support full https request
  • Support language switch



2. vue-native-starter-app

Vue Native Starter App with Login, News Feed and Sidebar using Vuelidate and Vuex.



3. vue-m-validator

Data Validation Library, for VueJs. Perhaps useful for other libraries/frameworks and other projects, but i created this library and using with VueJs with reactive data.



4. vue-drag-verify

This is a vue component, which is sliding to unlock some functionalities, such as login or sign up. This is used to protect your web app from attack.




5. Vuelidation

simple, powerful, vuejs validation.




6. Simple Vue Validator

Simple Vue validator is a lightweight yet flexible plugin for Vue.js 2.0 that allows you to validate input fields, and display errors. It watches changes of your model data, validates them and informs you with the validation result.

It supports the following features:

  • Fully customized validation rules.
  • Cross field validation.
  • Async/ajax validation (with supports of loading indicator, result caching, debounced user input).
  • Validating custom component.
  • Dynamic form / multiple validation instances.

Simple Vue Validator


7. vue-rawmodel

This plugin integrates RawModel.js framework into your Vue.js application.

RawModel.js is a simple framework which provides a strongly-typed JavaScript object with support for validation and error handling. It has a rich API which significantly simplifies server-side and client-side data validation and manipulation. Because it’s an unopinionated framework it flawlessly integrates with popular modules like vuex, apollo-client and other related libraries.



8. vee-validate

vee-validate is a plugin for Vue.js that allows you to validate input fields, and display errors.

You don’t have to do anything fancy in your app, most of the work goes into the html, You only need to specify for each input what kind of validators should be used when the value changes. The errors will be automatically generated. The plugin offers many validations out of the box.




9. vue-validator

Validator component for Vue.js



10. Vuelidate

Simple, lightweight model-based validation for Vue.js 2.0

Features & characteristics:

  • Model based
  • Decoupled from templates
  • Dependency free, minimalistic library
  • Support for collection validations
  • Support for nested models
  • Contextified valdiators
  • Easy to use with custom validators (e.g. Moment.js)
  • Support for function composition
  • Validates different data sources: Vuex getters, computed values, etc.



I hope you like them!

#vue #vue-validate #validate-vue #validate-component