diff --git a/package.json b/package.json
index 15e4f7d1..52478226 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "npm": "^6.0.1",
     "popper.js": "^1.14.1",
     "sweetalert2": "^7.15.1",
+    "vee-validate": "^2.1.0-beta.5",
     "vform": "^1.0.0",
     "vue": "^2.5.16",
     "vue-axios": "^2.1.1",
diff --git a/resources/assets/js/pages/settings/admin-supplier.vue b/resources/assets/js/pages/settings/admin-supplier.vue
index 44de3f5c..fbbb7085 100644
--- a/resources/assets/js/pages/settings/admin-supplier.vue
+++ b/resources/assets/js/pages/settings/admin-supplier.vue
@@ -19,34 +19,64 @@
 		</div>
 		<!-- popup add new supplier -->
 			<el-dialog title="Add New Supplier" align="center" :visible.sync="AddNewSupplierdialogVisible" width="40%">
-					<el-form  label-width="150px">
-						<el-form-item label="Company Name"><el-input v-model="supplierForm.company_name"></el-input></el-form-item>
-						<el-form-item label="Registration No"><el-input v-model="supplierForm.supplier_reg_no"></el-input></el-form-item>
-						<el-form-item label="GST No"><el-input v-model="supplierForm.gst_no"></el-input></el-form-item>
-						<el-form-item label="Bank Name"><el-input v-model="supplierForm.bank_name"></el-input></el-form-item>
-						<el-form-item label="Account No"><el-input v-model="supplierForm.acc_no"></el-input></el-form-item>
-					</el-form>
+				<el-form  label-width="150px" >
+					<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
+						<el-input v-model="supplierForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Registration No" :class="{'has-error': errors.has('supplier_reg_no') }">
+						<el-input v-model="supplierForm.supplier_reg_no" v-validate="'required|max:191'" name="supplier_reg_no"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('supplier_reg_no')">{{ errors.first('supplier_reg_no') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="GST No" :class="{'has-error': errors.has('gst_no') }">
+						<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('gst_no')">{{ errors.first('gst_no') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Bank Name":class="{'has-error': errors.has('bank_name') }">
+						<el-input v-model="supplierForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Account No":class="{'has-error': errors.has('acc_no') }">
+						<el-input v-model="supplierForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
+					</el-form-item>
+				</el-form>
 				<div align="center">
 						<el-button @click="AddNewSupplierdialogVisible = false">Cancel</el-button>
-						<el-button type="primary" @click="AddNewSupplierdialogVisible = false; DoneAddSupplierdialogVisible = true">OK</el-button>
+						<el-button type="primary" @click="CreateSupplier">OK</el-button>
 				</div>
 			</el-dialog>
 			<el-dialog align="center" :visible.sync="DoneAddSupplierdialogVisible" width="30%">
 				<span>Supplier Added Successfully</span><br><br>
 				<div align="center">
-						<el-button type="primary" @click="CreateSupplier">OK</el-button>
+						<el-button type="primary" @click="DoneAddSupplierdialogVisible = false;">OK</el-button>
 				</div>
 			</el-dialog>
 		<!-- popup add new supplier end -->
 		<!-- popup edit supplier -->
 			<el-dialog title="Edit Supplier" align="center" :visible.sync="EditSupplierdialogVisible" width="40%">
-					<el-form  label-width="150px">
-						<el-form-item label="Company Name"><el-input v-model="supplierForm.company_name"></el-input></el-form-item>
-						<el-form-item label="Registration No"><el-input v-model="supplierForm.supplier_reg_no"></el-input></el-form-item>
-						<el-form-item label="GST No"><el-input v-model="supplierForm.gst_no"></el-input></el-form-item>
-						<el-form-item label="Bank Name"><el-input v-model="supplierForm.bank_name"></el-input></el-form-item>
-						<el-form-item label="Account No"><el-input v-model="supplierForm.acc_no"></el-input></el-form-item>
-					</el-form>
+					<el-form  label-width="150px" >
+					<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
+						<el-input v-model="supplierForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Registration No" :class="{'has-error': errors.has('supplier_reg_no') }">
+						<el-input v-model="supplierForm.supplier_reg_no" v-validate="'required|max:191'" name="supplier_reg_no"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('supplier_reg_no')">{{ errors.first('supplier_reg_no') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="GST No" :class="{'has-error': errors.has('gst_no') }">
+						<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('gst_no')">{{ errors.first('gst_no') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Bank Name":class="{'has-error': errors.has('bank_name') }">
+						<el-input v-model="supplierForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Account No":class="{'has-error': errors.has('acc_no') }">
+						<el-input v-model="supplierForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
+					</el-form-item>
+				</el-form>
 				<div align="center">
 						<el-button @click="EditSupplierdialogVisible = false">Cancel</el-button>
 						<el-button type="primary" @click="EditSupplier">OK</el-button>
@@ -72,6 +102,10 @@
 
 <script>
 var client = require('./client');
+import Vue from 'vue'
+import VeeValidate from 'vee-validate';
+Vue.use(VeeValidate);
+
 
 	export default {
 		data() {
@@ -97,9 +131,10 @@ var client = require('./client');
 		},
 		methods:{
 			CreateSupplier : function(){
-				this.DoneAddSupplierdialogVisible = false;
+				this.AddNewSupplierdialogVisible = false; 
 				client.post('api/setting-supplier', this.supplierForm)
 				.then((response) => {
+					this.DoneAddSupplierdialogVisible = true;
 					this.ClearSupplierForm();
 				})
 				.catch((error) => {
@@ -110,7 +145,8 @@ var client = require('./client');
 						type: 'error',
 						duration: 10000
 					});
-				})
+					this.ClearSupplierForm();
+				});
 			},
 			UpdateTableData : function(){
 				client.get('api/setting-supplier', this.supplierForm)
@@ -150,7 +186,6 @@ var client = require('./client');
 
 				client.put('api/setting-supplier/' + this.currentEdit, this.supplierForm)
 				.then((response) => {
-					this.ClearSupplierForm();
 					this.UpdateTableData();
 				})
 				.catch((error) => {
@@ -162,7 +197,6 @@ var client = require('./client');
 						duration: 10000
 					});
 				})
-
 			},
 			PopOutEditSupplier : function(supplier_id){
 				this.EditSupplierdialogVisible = true;
@@ -186,3 +220,9 @@ var client = require('./client');
 		}
 	}
 </script>
+<style type="text/css">
+	.error-message{
+		position: absolute;
+		left: 0;
+	}
+</style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index df24263b..afd34fe8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9792,6 +9792,10 @@ vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
 
+vee-validate@^2.1.0-beta.5:
+  version "2.1.0-beta.5"
+  resolved "https://registry.yarnpkg.com/vee-validate/-/vee-validate-2.1.0-beta.5.tgz#311c4629face2383964beb06768b379500f25a69"
+
 vendors@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.2.tgz#7fcb5eef9f5623b156bcea89ec37d63676f21801"