036

src/a3.nim

@@ -378,6 +378,30 @@ import
     val.class = "text-success"
   ctx.send sendLastName(lname, val)
 
+"/validation/fname" -> post:
+  var fname = ctx.urlForm["c_fname"]
+  echo fname
+  var val: Validity
+  if fname == "":
+    val.message = "First Name is Required"
+    val.class = "text-danger"
+  else:
+    val.message = ""
+    val.class = "text-success"
+  ctx.send sendFirstName(fname, val)
+
+"/validation/address" -> post:
+  var address = ctx.urlForm["c_address"]
+  echo address
+  var val: Validity
+  if address == "":
+    val.message = "Address is Required"
+    val.class = "text-danger"
+  else:
+    val.message = ""
+    val.class = "text-success"
+  ctx.send sendAddress(address, val)
+
 "/contact" -> get:
   
   var

src/a3a/checkout.nimja

@@ -103,10 +103,16 @@
               </select>
             </div>
             <div class="form-group row">
-              <div class="col-md-6">
+              <div
+                class="col-md-6"
+                hx-target="this"
+                hx-swap="outerHTML"
+              >
                 <label for="c_fname" class="text-black">First Name <span class="text-danger">*</span></label>
-                <label class="text-danger">{{firstNameError}}</label>
-                <input type="text" class="form-control" id="c_fname" name="c_fname">
+                <input type="text" class="form-control" id="c_fname"
+                  hx-post="/validation/fname"
+                  name="c_fname"
+                >
               </div>
               <div
                 class="col-md-6"
@@ -129,10 +135,17 @@
             </div> #}
 
             <div class="form-group row">
-              <div class="col-md-12">
+              <div
+                class="col-md-12"
+                hx-target="this"
+                hx-swap="outerHTML"
+              >
                 <label for="c_address" class="text-black">Address <span class="text-danger">*</span></label>
-                <label class="text-danger">{{addressError}}</label>
-                <input type="text" class="form-control" id="c_address" name="c_address" placeholder="Street address">
+                {# <label class="text-danger">{{addressError}}</label> #}
+                <input type="text" class="form-control" id="c_address" name="c_address"
+                  placeholder="Street address"
+                  hx-post="/validation/address"
+                >
               </div>
             </div>
 

src/a3pkg/htmx.nim

@@ -7,7 +7,6 @@ type
     class*: string
 
 proc sendLastName*(lastName: string, input: Validity): string =
-
   result = fmt"""
     <div
       class="col-md-6"
@@ -23,3 +22,37 @@ proc sendLastName*(lastName: string, input: Validity): string =
       >
     </div>
   """
+
+proc sendFirstName*(firstName: string, input: Validity): string =
+  result = fmt"""
+    <div
+      class="col-md-6"
+      hx-target="this"
+      hx-swap="outerHTML"
+    >
+      <label for="c_lname" class="text-black">First Name <span class="text-danger">*</span></label>
+      <label class="{input.class}">{input.message}</label>
+      <input type="text" class="form-control" id="c_fname"
+        hx-post="/validation/fname"
+        name="c_fname"
+        value="{firstName}"
+      >
+    </div>
+  """
+
+proc sendAddress*(address: string, input: Validity): string =
+  result = fmt"""
+    <div
+      class="col-md-12"
+      hx-target="this"
+      hx-swap="outerHTML"
+    >
+      <label for="c_address" class="text-black">Address <span class="text-danger">*</span></label>
+      <label class="{input.class}">{input.message}</label>
+      <input type="text" class="form-control" id="c_address"
+        hx-post="/validation/address"
+        name="c_address"
+        value="{address}"
+      >
+    </div>
+  """