Client side validation

cmd/web/templates/terminal.page.gohtml

@@ -5,6 +5,7 @@ Virtual Terminal
 {{ define "content" }}
 <h2 class="mt-3 text-center">Virtual Terminal</h2>
 <hr>
+<div class="alert alert-danger text-center d-none" id="card-messages"></div>
 <form action="/payment-succecded"
       method="post"
       name="charge_form"
@@ -47,10 +48,15 @@ Virtual Terminal
         <div class="alert-success text-center" id="card-success" role="alert"></div>
     </div>
     <hr>
-    <a href="javastript:void(0)"
+    <a href="javascript:void(0)"
        id="pay-button"
        class="btn btn-primary"
        onclick="val()">Charge Card</a>
+    <div class="text-center d-none" id="processing-payment">
+        <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">Loading...</span>
+        </div>
+    </div>
 </form>
 {{ end }}
 {{ define "js" }}
@@ -59,11 +65,22 @@ Virtual Terminal
 
 let card;
 let stripe;
+const cardMessages = document.getElementById("card-messages");
+const payButton = document.getElementById("pay-button");
+const processing = document.getElementById("processing-payment");
 
 stripe = Stripe(''); // TODO: Publish key to be added
 
 function val() {
+    let form = document.getElementById("charge_form");
 
+    if (form.checkValidity() === false) {
+        this.event.preventDefault();
+        this.event.stopPropagation();
+        form.classList.add("was-validated");
+        return;
+    }
+    form.classList.add("was-validated");
 }
 
 (function () {