feat: add inline validation example

internal/server/routes.go

@@ -10,6 +10,7 @@ import (
 	clicktoload "github.com/gofs-cli/template/internal/ui/pages/click-to-load"
 	deleterow "github.com/gofs-cli/template/internal/ui/pages/delete-row"
 	"github.com/gofs-cli/template/internal/ui/pages/home"
+	inlinevalidation "github.com/gofs-cli/template/internal/ui/pages/inline-validation"
 	"github.com/gofs-cli/template/internal/ui/pages/notfound"
 	"github.com/gofs-cli/template/internal/ui/pages/page1"
 	"github.com/gofs-cli/template/internal/ui/pages/page2"
@@ -45,6 +46,11 @@ func (s *Server) Routes() {
 	routesMux.Handle("GET /delete-row", deleterow.Index())
 	routesMux.Handle("DELETE /delete-row/contact/1", deleterow.Delete())
 
+	// inline validation example
+	routesMux.Handle("GET /inline-validation", inlinevalidation.Index())
+	routesMux.Handle("POST /inline-validation", inlinevalidation.Submit())
+	routesMux.Handle("POST /inline-validation/email", inlinevalidation.Validate())
+
 	routesMux.Handle("GET /modal", home.Modal())
 
 	routesMux.Handle("GET /page1", page1.Index())

internal/ui/pages/inline-validation/handlers.go

@@ -0,0 +1,29 @@
+package inlinevalidation
+
+import (
+	"net/http"
+
+	"github.com/a-h/templ"
+	"github.com/gofs-cli/template/internal/ui"
+	"github.com/gofs-cli/template/internal/ui/components/header"
+)
+
+func Index() http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		templ.Handler(ui.IndexPage(layout(header.Header(), body()))).ServeHTTP(w, r)
+	})
+}
+
+func Submit() http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		e := r.PostFormValue("email")
+		templ.Handler(form(e)).ServeHTTP(w, r)
+	})
+}
+
+func Validate() http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		e := r.PostFormValue("email")
+		templ.Handler(email(e, e != "test@test.com")).ServeHTTP(w, r)
+	})
+}

internal/ui/pages/inline-validation/index.templ

@@ -0,0 +1,81 @@
+package inlinevalidation
+
+import "github.com/gofs-cli/template/internal/ui/components/toast"
+
+css classLayout() {
+	display: grid;
+}
+
+css formStyles() {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+css validInput() {
+	box-shadow: 0 0 3px #36cc00;
+}
+
+css errorInput() {
+	box-shadow: 0 0 3px #CC0000;
+}
+
+css errorMessage() {
+	color: red;
+}
+
+templ layout(header, body templ.Component) {
+	@toast.Container()
+	<main class={ classLayout() }>
+		<div>
+			@header
+		</div>
+		<div>
+			@body
+		</div>
+	</main>
+}
+
+templ body() {
+	<h2>Inline Validation:</h2>
+	<p>Enter an email into the input below and on tab out it will be validated. Only "test@test.com" will pass.</p>
+	@form("")
+}
+
+templ form(emailAddress string) {
+	<form hx-post="/inline-validation" class={ formStyles() }>
+		@email(emailAddress, false)
+		<div>
+			<label>First Name</label>
+			<input type="text" name="firstName"/>
+		</div>
+		<div>
+			<label>Last Name</label>
+			<input type="text" name="lastName"/>
+		</div>
+		<button style="width: fit-content;">Submit</button>
+	</form>
+}
+
+templ email(email string, err bool) {
+	<div hx-target="this" hx-swap="outerHTML">
+		<label>Email Address</label>
+		<input
+			name="email"
+			hx-post="/inline-validation/email"
+			hx-indicator="#ind"
+			value={ email }
+			if err {
+				class={ errorInput() }
+			}
+			else
+			if email !="" {
+				class={ validInput() }
+			}
+		/>
+		<img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
+		if err {
+			<div class={ errorMessage() }>That email is already taken.  Please enter another email.</div>
+		}
+	</div>
+}