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 : C# Code Optimizing Tutorial with Examples

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

<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 : Vue Expand Collapse using Vuejs-Expand and collapse with Vuejs - Accordion

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!.

Post Views: 1,243

vuejs Form Validation Vuelidate Example