Source Code

Vuejs Form Validation Example

Trigger validation of all fields in Vuejs Form submit

Vee-Validate This is a lightweight plugin for VueJS that allows you to validate input fields, and display errors. vue-validator on live24u.com.

{{ errors.first('FirstName') }}
{{ errors.first('LastName') }}
Validate Form

Vuejs form validation on submit Example

{{ errors }}
{{ fields }}

Example : index.html


<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>vue js form validation example | vue-validator</title>
  <meta name="description" content="">
  <link rel="stylesheet" type="text/css" media="all" href="l2/jquery-autocomplete-textbox.css">
  <link rel="stylesheet" type="text/css" media="all" href="l2/global.css">
<link rel="stylesheet" type="text/css" media="all" href="l2/bootstrap.min.css">
</head>
<body >
  <div id="w">
    <div id="content" >
      <div id="app">
		   <form class="form-horizontal" @submit.prevent="validateBeforeSubmit">
			  <div class="form-group">
				<label class="control-label col-md-2 col-sm-4" for="firstName">First Name:</label>
				<div class="col-md-5 col-sm-8" v-bind:class="{ 'has-error' : errors.has('FirstName') }">
				  <input name="FirstName" v-model="firstName"  data-vv-delay="100" v-validate="'required|alpha|min:3'" class="form-control" type="text" id="firstName" placeholder="" v-bind:class="{ 'input': true, 'has-error': errors.has('FirstName') }" >
				  <span v-show="errors.has('FirstName')" class="help-block error text-danger">{{ errors.first('FirstName') }}</span>
				</div>
			  </div>
			  
			  <div class="form-group">
				<label class="control-label col-md-2 col-sm-4" for="lastName">Last Name:</label>
				<div class="col-md-5 col-sm-8" v-bind:class="{ 'has-error' : errors.has('LastName') }">
				  <input name="LastName" v-model="lastName" v-validate="'required|alpha|min:3'" class="form-control" type="text" placeholder="" v-bind:class="{ 'input': true, 'has-error': errors.has('lastName') }" >
				  <span v-show="errors.has('LastName')" class="help-block error text-danger">{{ errors.first('LastName') }}</span>
				</div>
			  </div>
			</form>
			  <a class="btn btn-success btn-md " v-on:click="validateBeforeSubmit">Validate Form</a>

      <div id="outputbox">
		<h2>Vuejs form validation on submit Example</h2>
        <p id="outputcontent">
			<div class="row">
				<div class="col-md-6"><pre>{{ errors }}</pre></div>
				<div class="col-md-6"><pre>{{ fields }}</pre></div>
			</div>
		</p>
      </div>
	   </div>
    </div>
  </div>
  <script src="l2/vue.js"></script>
  <script src="l2/vee-validate.min.js"></script>  
  <script src="l2/jquery.min.js"></script>
  <script src="l2/bootstrap.min.js"></script>
</body>
</html>

Example : App.js


  Vue.use(VeeValidate);
	var app = new Vue({
	  el: '#app',
	  
	  data: {
		firstName: null,
		lastName: null
	  },
	  
	  methods:{
		validateBeforeSubmit: function(){
		  function onOk(){
			alert('Form is OK');
		  }
		  
		  function notOk(){
			alert('Form Not OK');
		  }
		  
		  this.$validator.validateAll().then(onOk, notOk);
		}
	  }
	});