From f0f4247c5d5d909b776272ca7caf91c6b5e0eaea Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Wed, 15 Aug 2018 23:58:39 +0200
Subject: [PATCH] Field validation

---
 BTCPayServer/Views/Apps/PayButton.cshtml | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/BTCPayServer/Views/Apps/PayButton.cshtml b/BTCPayServer/Views/Apps/PayButton.cshtml
index 8807fa61c..e0d8e2247 100644
--- a/BTCPayServer/Views/Apps/PayButton.cshtml
+++ b/BTCPayServer/Views/Apps/PayButton.cshtml
@@ -23,7 +23,7 @@
                     <div class="form-group col-md-4">
                         <label>&nbsp;</label>
                         <select class="form-control" v-model="srvModel.currency" v-on:change="inputChanges">
-                            @foreach(var item in Model.CurrencyDropdown)
+                            @foreach (var item in Model.CurrencyDropdown)
                             {
                                 <option>@item</option>
                             }
@@ -78,8 +78,11 @@
                 </div>
                 <div class="form-group">
                     <label>Send Email Notifications to</label>
-                    <input type="text" class="form-control" placeholder="(optional)"
-                           v-model="srvModel.emailToNotify" v-on:change="inputChanges">
+                    <input type="text" name="emailToNotify" class="form-control" placeholder="(optional)"
+                           v-model="srvModel.emailToNotify" v-on:change="inputChanges"
+                           v-validate="'email'" :class="{'is-invalid': errors.has('emailToNotify') }">
+                    <small class="text-danger">{{ errors.first('emailToNotify') }}</small>
+                    
                 </div>
                 <div class="form-group">
                     <label>Browser Redirect</label>
@@ -116,8 +119,12 @@
     <script src="~/vendor/highlightjs/highlight.min.js"></script>
 
     <script src="~/vendor/vuejs/vue.js"></script>
+    <!-- jsdelivr cdn -->
+    <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
+
     <script type="text/javascript">
         var srvModel = @Html.Raw(Json.Serialize(Model));
+        Vue.use(VeeValidate);
         var payButtonCtrl = new Vue({
             el: '#payButtonCtrl',
             data: {
@@ -128,7 +135,7 @@
                     inputChanges(event, buttonSize);
                 }
             }
-            });
+        });
 
         function inputChanges(event, buttonSize) {
             if (buttonSize != null) {