vuejs Form Validation Vuelidate Example

Today, We want to share with you vuejs Form Validation Vuelidate Example.
In this post we will show you vuejs Form Validation Example | Vuejs 2 + form validation, hear for Vuejs Form Validation Tutorial With Example From Scratch we will give you demo and example for implement.
In this post, we will learn about Vuejs 2 + form validation with an example.

vuejs Form Validation Example

what is Vee-Validate?

This is a one type of lightweight plugin for used VueJS that allows us to validate all html input fields, and generate display errors.

Installation of vee-validate Used Any One

npm
---
npm install [email protected] --save
npm install vee-validate --save

bower
-----
bower install vee-validate#1.0.0-beta.11 --save
bower install vee-validate#2.0.0-beta.19 --save

CDN
---
<script src="vue.js"></script>
<script src="vee-validate.js"></script>
<script>
    Vue.use(VeeValidate); 
</script>

Configuration of vuejs validation

errorBagName:
fieldsBagName:
delay:
locale:
dictionary:
strict:
enableAutoClasses:
classNames:

READ : Vuejs set focus Textbox Components

vuejs form validation using vee-validate.

Include JS and CSS

 <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="/vue/2.0.3/vue.js"></script>
  <script src="/vee-validate.min.js"></script>  
  <script src="/jquery.min.js"></script>
  <script src="/js/bootstrap.min.js"></script>

Body Part

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

<body>
  <div id="myapp" class="container">
    <form class="form-horizontal" @submit.prevent="validationgeneratesub">
      <div class="form-group">
        <label class="control-label col-md-2 col-sm-4" for="webname">webname Name:</label>
        <div class="col-md-5 col-sm-8" v-bind:class="{ 'has-error' : errors.has('webname') }">
		<hr>
          <input name="webname" v-model="webname"  data-vv-delay="100" v-validate="'required|alpha|min:3'" class="form-control" type="text" id="webname" placeholder="" v-bind:class="{ 'input': true, 'has-error': errors.has('webname') }" >
		  <br/>
          <span v-show="errors.has('webname')" class="help-block error text-danger">{{ errors.first('webname') }}</span>
        </div>
      </div>
      
      <div class="form-group">
        <label class="control-label col-md-2 col-sm-4" for="sitename">Last Name:</label>
        <div class="col-md-5 col-sm-8" v-bind:class="{ 'has-error' : errors.has('sitename') }">
		<hr/>
          <input name="sitename" v-model="sitename" v-validate="'required|alpha|min:3'" class="form-control" type="text" placeholder="" v-bind:class="{ 'input': true, 'has-error': errors.has('sitename') }" >
		  <br/>
          <span v-show="errors.has('sitename')" class="help-block error text-danger">{{ errors.first('sitename') }}</span>
        </div>
      </div>
    </form>
    
    <a class="btn btn-success btn-md " v-on:click="validationgeneratesub">Validate Form</a>
    <hr />
    <pre><b>{{ errors }}</b></pre>
    <pre><p>{{ fields }}</p></pre>
  </div>
</body>

View Demo

READ : Vuejs Add Remove Class to Active Element

We hope you get an idea about vuejs Form Validation Vuelidate Example
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.