From 031cf4897fc7b5c8334ce87c8d3c0c621bb72210 Mon Sep 17 00:00:00 2001
From: Jack Goh <jackgoh0@gmail.com>
Date: Fri, 15 Jun 2018 11:07:52 +0800
Subject: [PATCH] added validation for input bank details

---
 resources/assets/js/pages/home.vue | 66 +++++++++++++++++++++---------
 1 file changed, 47 insertions(+), 19 deletions(-)

diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 9b21ef47..d38b97cf 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -141,28 +141,27 @@
 
     <!-- Form_popup -->
     <el-dialog :visible.sync="dialogFormVisible" title="Booking" :fullscreen="true" center>
-      <el-form>
+      <el-form :model="bookingForm" :rules="rules" ref="bookingForm">
         <div align="center">
-          <el-form-item>
-            <el-input v-model="booking.account_name" type="text" placeholder="China Beneficiary Account" style="width: 80%" />
+          <el-form-item prop="account_name">
+            <el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Account" style="width: 80%" required="true"/>
           </el-form-item>
-          <el-form-item>
-            <el-input v-model="booking.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" />
+          <el-form-item prop="bank_name">
+            <el-input v-model="bookingForm.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" />
           </el-form-item>
-          <el-form-item>
-            <el-input v-model="booking.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%" />
+          <el-form-item prop="bank_branch">
+            <el-input v-model="bookingForm.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%" />
           </el-form-item>
-          <el-form-item>
-            <el-input v-model="booking.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"
+          <el-form-item prop="account_num">
+            <el-input v-model="bookingForm.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"
             />
           </el-form-item>
+          <el-form-item>
+            <el-button @click="dialogFormVisible = false">Cancel</el-button>
+            <el-button type="primary" @click="getCalculationValue('bookingForm')">Book Now</el-button>
+          </el-form-item>
         </div>
       </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">Cancel</el-button>
-        <el-button type="submit" @click="getCalculationValue">Book Now</el-button>
-        <!--<el-button type="submit" @click="createBooking">Book Now</el-button>-->
-      </span>
     </el-dialog>
     <!-- Form_popup-end -->
 
@@ -249,13 +248,33 @@
     data() {
       return {
         status: '',
-        booking: {
-          amount: '',
+        booking:{
+          amount: ''
+        },
+        bookingForm: {
+          //amount: '',
           account_name: '',
           bank_name: '',
           bank_branch: '',
           account_num: ''
         },
+        rules: {
+          amount: [
+            { required: true, message: 'Please input amount', trigger: 'change' },
+          ],
+          bank_name: [
+            { required: true, message: 'Please input bank name', trigger: 'change' },
+          ],
+          account_name: [
+            { required: true, message: 'Please input account name', trigger: 'change' }
+          ],
+          bank_branch: [
+            { required: true, message: 'Please input branch', trigger: 'change' }
+          ],
+          account_num: [
+            { required: true, message: 'Please input account number', trigger: 'change' }
+          ]
+        },
         term: '',
         options1: [{
           value: 'RMB',
@@ -411,9 +430,18 @@
         this.dialogFormVisible = true
         this.term = newterm
       },
-      getCalculationValue() {
-        this.dialogFormVisible = false
-        this.dialogFormVisible1 = true
+      getCalculationValue(formName) {
+          this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+            this.dialogFormVisible = false
+            this.dialogFormVisible1 = true
+          } else {
+            console.log('error submit!!');
+            return;
+          }
+        });
+
       },
       createBooking: function () {
         this.$router.push({