feat: disabling auth submit on empty names

https://htmx.org/attributes/hx-validate/
for 'non form submittions' to trigger validation

custom check, because 'required' marks fields red immediately
and this js does only on attempted submittion,
not sure i want it, but seems better right now.
also - such a good argument for hyperscript

routes/static/out.css

@@ -612,3 +612,8 @@ video {
   font-size: 1.25rem;
   line-height: 1.75rem;
 }
+
+.invalid\:bg-red-700:invalid {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+}

routes/templates/login.gohtml

@@ -49,6 +49,7 @@
               hx-post="/login/room-name-check"
               hx-target="#formButton"
               hx-swap="outerHTML"
+              class="invalid:bg-red-700"
             />
             <input
               id="roomPassword"
@@ -66,6 +67,7 @@
               name="personalName"
               value=""
               placeholder="personal name"
+              class="invalid:bg-red-700"
             />
             <input
               id="personalPassword"
@@ -75,17 +77,67 @@
               placeholder="personal password"
             />
           </div>
-          {{ block "formButton" .IsRoomExisting }}
-          {{ if not . }}
-          <button id="formButton" class="col-span-full" hx-post="/login/create">Create Room</button>
+          {{ block "formButton" .IsRoomExisting }} {{ if not . }}
+          <button
+            id="formButton"
+            class="col-span-full"
+            hx-post="/login/create"
+            hx-validate="true"
+          >
+            Create Room
+          </button>
           {{ else }}
-          <button id="formButton" class="col-span-full" hx-post="/login/join">Join Room</button>
-          {{ end }}
-          {{ end }}
+          <button
+            id="formButton"
+            class="col-span-full"
+            hx-post="/login/join"
+            hx-validate="true"
+          >
+            Join Room
+          </button>
+          {{ end }} {{ end }}
         </form>
         <script>
-          window.addEventListener('DOMContentLoaded', (event) => {
-            document.getElementById('loginForm').reset();
+          window.addEventListener("DOMContentLoaded", (event) => {
+            document.getElementById("loginForm").reset();
+          });
+
+          const requiredInputFunc = function (event) {
+            // If the input is empty...
+            if (this.value.trim() === "") {
+              // ...set a custom validity message
+              console.log("empty name");
+              this.setCustomValidity("Please fill out this field.");
+              this.checkValidity();
+            } else {
+              // If not empty, clear any custom validity message
+              console.log("other");
+              this.setCustomValidity("");
+            }
+          };
+
+          // Find the input element
+          const personalNameInput = document.getElementById("personalName");
+          const roomNameInput = document.getElementById("roomName");
+
+          // Listen for the 'htmx:validation:validate' event on the input element
+          personalNameInput.addEventListener(
+            "htmx:validation:validate",
+            requiredInputFunc,
+          );
+          roomNameInput.addEventListener(
+            "htmx:validation:validate",
+            requiredInputFunc,
+          );
+
+          // You can also listen for the 'input' event to clear the validation message as the user types
+          personalNameInput.addEventListener("input", function (event) {
+            // Always clear the custom validity message when the user types
+            this.setCustomValidity("");
+          });
+          roomNameInput.addEventListener("input", function (event) {
+            // Always clear the custom validity message when the user types
+            this.setCustomValidity("");
           });
         </script>
       </section>