vuejs Form Validation Vuelidate Example
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:
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>
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!.
Free POS Software Canada point of sale systems
Angular GridView Insert Update and Delete in ASP.NET MVC