Form validation

Makefile

@@ -9,7 +9,7 @@ templ:
 
 .PHONY: build
 build: templ
-	@go build -ldflags "-s -w" -o ./build/${EXEC} ./app/.
+	@CGO_ENABLED=0 go build -ldflags "-s -w" -o ./build/${EXEC} ./app/.
 
 
 upgrade-packages:

app/handlers/interactive.go

@@ -11,7 +11,7 @@ import (
 )
 
 var pcInteractive templates.PageContext = templates.PageContext{
-	Title:      "Welcome to the demo",
+	Title:      "Welcome to the demo - Interactive",
 	ActivePage: "interactive",
 }
 
@@ -50,3 +50,38 @@ func FilterCatBreeds(c *gin.Context) {
 
 	templates.RenderCatBreedsTable(catBreeds).Render(c, c.Writer)
 }
+
+func ValidateForm(c *gin.Context) {
+	content := templates.ValidateFormContent{
+		Validated: true,
+		NumValue:  c.PostForm("number-value"),
+		StrValue:  c.PostForm("string-value"),
+	}
+
+	numValue, err := strconv.Atoi(content.NumValue)
+	if err != nil {
+		content.HasNumValueError = true
+		content.NumValueError = "This is not valid number"
+	}
+	if !content.HasNumValueError {
+		if numValue < 0 {
+			content.HasNumValueError = true
+			content.NumValueError = "Value is less than 0"
+		}
+		if numValue > 100 {
+			content.HasNumValueError = true
+			content.NumValueError = "Value is greater than 100"
+		}
+	}
+
+	if len(content.StrValue) < 5 {
+		content.HasStrValueError = true
+		content.StrValueError = "String length is less than 5"
+	}
+	if len(content.StrValue) > 10 {
+		content.HasStrValueError = true
+		content.StrValueError = "String length is more than 10"
+	}
+
+	templates.RenderInteractiveForm(content).Render(c, c.Writer)
+}

app/router/router.go

@@ -10,7 +10,7 @@ import (
 
 const (
 	APPHOST     string = "127.0.0.1"
-	APPPORT     int    = 8000
+	APPPORT     int    = 8080
 	STATIC_PATH string = "./static"
 )
 
@@ -27,6 +27,7 @@ func initRouter() *gin.Engine {
 		interactiveRouter.GET("", handlers.Interactive)
 		interactiveRouter.GET("/swap-content", handlers.InteractiveSwapContent)
 		interactiveRouter.GET("/filter-cat-breeds", handlers.FilterCatBreeds)
+		interactiveRouter.POST("/validate-form", handlers.ValidateForm)
 	}
 
 	router.Use(static.Serve("/static", static.LocalFile(STATIC_PATH, false)))

app/templates/context.go

@@ -1,9 +0,0 @@
-package templates
-
-import "templ-tests/app/types"
-
-type PageContext struct {
-	Title      string
-	ActivePage string
-	User       *types.User
-}

app/templates/interactive.templ

@@ -7,7 +7,7 @@ import (
 	"sort"
 )
 
-templ interactiveButtons() {
+templ interactiveButtonsSection() {
 	<h3 class="mb-3">
 		Interactive buttons
 	</h3>
@@ -130,26 +130,19 @@ templ catBreedsTable(catBreeds []types.CatBreed) {
 	</table>
 }
 
-templ Interactive(pc PageContext, catBreeds []types.CatBreed) {
-	@baseLayout(pc) {
-		@interactiveButtons()
-		@catBreedsSection(catBreeds)
-	}
-}
-
 templ InteractiveSwapContent(pc PageContext, contentIndex int) {
 	switch contentIndex {
 		case 1:
-			<p>
+			<p class="alert alert-info">
-				Some new content 1...
+				Bacon ipsum dolor amet t-bone meatball corned beef hamburger cupim rump drumstick tri-tip doner pastrami kielbasa salami pig. Pork loin doner leberkas, jerky fatback chuck corned beef cow rump strip steak shoulder pork belly. Flank hamburger porchetta shank sirloin bresaola chislic pork chop. Chicken jerky strip steak tongue jowl brisket cupim. Shankle t-bone short ribs fatback burgdoggen buffalo cupim prosciutto meatball pig doner boudin.
 			</p>
 		case 2:
-			<p>
+			<p class="alert alert-warning">
-				Some new content 2...
+				Rump venison tenderloin, picanha ribeye cupim pork belly sirloin landjaeger jerky prosciutto filet mignon alcatra. Short ribs pork chop rump kevin t-bone ground round hamburger, chislic tenderloin bacon sirloin filet mignon turducken beef pork loin. Buffalo picanha ground round pork chop. Venison cupim pork belly, andouille pastrami tail shankle pancetta. Picanha leberkas cupim turkey buffalo filet mignon pork belly pork chop rump sausage pork loin. Short ribs burgdoggen porchetta hamburger, cupim ribeye capicola shoulder. Pork drumstick kevin, turkey hamburger ground round burgdoggen chuck jerky bacon sausage chislic leberkas.
 			</p>
 		case 3:
-			<p>
+			<p class="alert alert-danger">
-				Some new content 3...
+				Biltong ham hock tongue, beef pork andouille fatback flank pork loin ribeye. Rump short loin porchetta, ground round buffalo hamburger salami pig venison beef ribs. Chislic beef ribs sausage fatback pork belly. Ribeye porchetta leberkas, tail hamburger biltong landjaeger short loin filet mignon chicken salami flank.
 			</p>
 		default:
 			<p>
@@ -161,3 +154,76 @@ templ InteractiveSwapContent(pc PageContext, contentIndex int) {
 templ RenderCatBreedsTable(catBreeds []types.CatBreed) {
 	@catBreedsTable(catBreeds)
 }
+
+templ RenderInteractiveForm(content ValidateFormContent) {
+	<div class="row" id="validation-form-content">
+		<div class="col">
+			<div class="mb-3">
+				<label for="validation-form-number" class="form-label">Enter number 0..100</label>
+				<input
+					type="text"
+					class={ "form-control",
+						templ.KV("is-invalid", content.HasNumValueError),
+						templ.KV("is-valid", content.Validated && !content.HasNumValueError) }
+					name="number-value"
+					id="validation-form-number"
+					value={ content.NumValue }
+				/>
+				if content.HasNumValueError {
+					<div class="invalid-feedback">{ content.NumValueError }</div>
+				}
+			</div>
+		</div>
+		<div class="col">
+			<div class="mb-3">
+				<label for="validation-form-string" class="form-label">Enter string, length 5..10</label>
+				<input
+					type="text"
+					class={ "form-control",
+						templ.KV("is-invalid", content.HasStrValueError),
+						templ.KV("is-valid", content.Validated && !content.HasStrValueError) }
+					name="string-value"
+					id="validation-form-string"
+					value={ content.StrValue }
+				/>
+				if content.HasStrValueError {
+					<div class="invalid-feedback">{ content.StrValueError }</div>
+				}
+			</div>
+		</div>
+	</div>
+}
+
+templ interactiveFormSection() {
+	<h3 class="mb-3">
+		Form validation
+	</h3>
+	<form
+		hx-post="/interactive/validate-form"
+		hx-target="#validation-form-content"
+		hx-swap="outerHTML"
+	>
+		<div class="card p-4">
+			@RenderInteractiveForm(ValidateFormContent{})
+			<div class="d-flex">
+				<button type="submit" class="btn btn-success ms-auto">
+					Submit
+				</button>
+			</div>
+		</div>
+	</form>
+}
+
+templ Interactive(pc PageContext, catBreeds []types.CatBreed) {
+	@baseLayout(pc) {
+		<div class="row">
+			<div class="col">
+				@interactiveButtonsSection()
+			</div>
+			<div class="col">
+				@interactiveFormSection()
+			</div>
+		</div>
+		@catBreedsSection(catBreeds)
+	}
+}

app/templates/interactive_templ.go

@@ -17,7 +17,7 @@ import (
 	"templ-tests/app/types"
 )
 
-func interactiveButtons() templ.Component {
+func interactiveButtonsSection() templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 		if !templ_7745c5c3_IsBuffer {
@@ -339,7 +339,7 @@ func catBreedsTable(catBreeds []types.CatBreed) templ.Component {
 	})
 }
 
-func Interactive(pc PageContext, catBreeds []types.CatBreed) templ.Component {
+func InteractiveSwapContent(pc PageContext, contentIndex int) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 		if !templ_7745c5c3_IsBuffer {
@@ -352,61 +352,14 @@ func Interactive(pc PageContext, catBreeds []types.CatBreed) templ.Component {
 			templ_7745c5c3_Var24 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var25 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
-			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
-			if !templ_7745c5c3_IsBuffer {
-				templ_7745c5c3_Buffer = templ.GetBuffer()
-				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
-			}
-			templ_7745c5c3_Err = interactiveButtons().Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = catBreedsSection(catBreeds).Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if !templ_7745c5c3_IsBuffer {
-				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
-			}
-			return templ_7745c5c3_Err
-		})
-		templ_7745c5c3_Err = baseLayout(pc).Render(templ.WithChildren(ctx, templ_7745c5c3_Var25), templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if !templ_7745c5c3_IsBuffer {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
-		}
-		return templ_7745c5c3_Err
-	})
-}
-
-func InteractiveSwapContent(pc PageContext, contentIndex int) templ.Component {
-	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
-		if !templ_7745c5c3_IsBuffer {
-			templ_7745c5c3_Buffer = templ.GetBuffer()
-			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var26 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var26 == nil {
-			templ_7745c5c3_Var26 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
 		switch contentIndex {
 		case 1:
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<p>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<p class=\"alert alert-info\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Var27 := `Some new content 1...`
+			templ_7745c5c3_Var25 := `Bacon ipsum dolor amet t-bone meatball corned beef hamburger cupim rump drumstick tri-tip doner pastrami kielbasa salami pig. Pork loin doner leberkas, jerky fatback chuck corned beef cow rump strip steak shoulder pork belly. Flank hamburger porchetta shank sirloin bresaola chislic pork chop. Chicken jerky strip steak tongue jowl brisket cupim. Shankle t-bone short ribs fatback burgdoggen buffalo cupim prosciutto meatball pig doner boudin.`
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var27)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var25)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -415,12 +368,12 @@ func InteractiveSwapContent(pc PageContext, contentIndex int) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		case 2:
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<p>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<p class=\"alert alert-warning\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Var28 := `Some new content 2...`
+			templ_7745c5c3_Var26 := `Rump venison tenderloin, picanha ribeye cupim pork belly sirloin landjaeger jerky prosciutto filet mignon alcatra. Short ribs pork chop rump kevin t-bone ground round hamburger, chislic tenderloin bacon sirloin filet mignon turducken beef pork loin. Buffalo picanha ground round pork chop. Venison cupim pork belly, andouille pastrami tail shankle pancetta. Picanha leberkas cupim turkey buffalo filet mignon pork belly pork chop rump sausage pork loin. Short ribs burgdoggen porchetta hamburger, cupim ribeye capicola shoulder. Pork drumstick kevin, turkey hamburger ground round burgdoggen chuck jerky bacon sausage chislic leberkas.`
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var28)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var26)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -429,12 +382,12 @@ func InteractiveSwapContent(pc PageContext, contentIndex int) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		case 3:
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<p>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<p class=\"alert alert-danger\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Var29 := `Some new content 3...`
+			templ_7745c5c3_Var27 := `Biltong ham hock tongue, beef pork andouille fatback flank pork loin ribeye. Rump short loin porchetta, ground round buffalo hamburger salami pig venison beef ribs. Chislic beef ribs sausage fatback pork belly. Ribeye porchetta leberkas, tail hamburger biltong landjaeger short loin filet mignon chicken salami flank.`
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var29)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var27)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -447,8 +400,8 @@ func InteractiveSwapContent(pc PageContext, contentIndex int) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Var30 := `Some new content with unknown index...`
+			templ_7745c5c3_Var28 := `Some new content with unknown index...`
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var30)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var28)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -472,9 +425,9 @@ func RenderCatBreedsTable(catBreeds []types.CatBreed) templ.Component {
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var31 := templ.GetChildren(ctx)
+		templ_7745c5c3_Var29 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var31 == nil {
+		if templ_7745c5c3_Var29 == nil {
-			templ_7745c5c3_Var31 = templ.NopComponent
+			templ_7745c5c3_Var29 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		templ_7745c5c3_Err = catBreedsTable(catBreeds).Render(ctx, templ_7745c5c3_Buffer)
@@ -487,3 +440,254 @@ func RenderCatBreedsTable(catBreeds []types.CatBreed) templ.Component {
 		return templ_7745c5c3_Err
 	})
 }
+
+func RenderInteractiveForm(content ValidateFormContent) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var30 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var30 == nil {
+			templ_7745c5c3_Var30 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row\" id=\"validation-form-content\"><div class=\"col\"><div class=\"mb-3\"><label for=\"validation-form-number\" class=\"form-label\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Var31 := `Enter number 0..100`
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var31)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</label> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var32 = []any{"form-control",
+			templ.KV("is-invalid", content.HasNumValueError),
+			templ.KV("is-valid", content.Validated && !content.HasNumValueError)}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var32...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input type=\"text\" class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var32).String()))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"number-value\" id=\"validation-form-number\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(content.NumValue))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if content.HasNumValueError {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"invalid-feedback\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var33 string
+			templ_7745c5c3_Var33, templ_7745c5c3_Err = templ.JoinStringErrs(content.NumValueError)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/templates/interactive.templ`, Line: 172, Col: 58}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var33))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"col\"><div class=\"mb-3\"><label for=\"validation-form-string\" class=\"form-label\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Var34 := `Enter string, length 5..10`
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var34)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</label> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var35 = []any{"form-control",
+			templ.KV("is-invalid", content.HasStrValueError),
+			templ.KV("is-valid", content.Validated && !content.HasStrValueError)}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var35...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input type=\"text\" class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var35).String()))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"string-value\" id=\"validation-form-string\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(content.StrValue))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if content.HasStrValueError {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"invalid-feedback\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var36 string
+			templ_7745c5c3_Var36, templ_7745c5c3_Err = templ.JoinStringErrs(content.StrValueError)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/templates/interactive.templ`, Line: 189, Col: 58}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var36))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func interactiveFormSection() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var37 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var37 == nil {
+			templ_7745c5c3_Var37 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h3 class=\"mb-3\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Var38 := `Form validation`
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var38)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h3><form hx-post=\"/interactive/validate-form\" hx-target=\"#validation-form-content\" hx-swap=\"outerHTML\"><div class=\"card p-4\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = RenderInteractiveForm(ValidateFormContent{}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex\"><button type=\"submit\" class=\"btn btn-success ms-auto\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Var39 := `Submit`
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var39)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button></div></div></form>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func Interactive(pc PageContext, catBreeds []types.CatBreed) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var40 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var40 == nil {
+			templ_7745c5c3_Var40 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var41 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+			if !templ_7745c5c3_IsBuffer {
+				templ_7745c5c3_Buffer = templ.GetBuffer()
+				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row\"><div class=\"col\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = interactiveButtonsSection().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = interactiveFormSection().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = catBreedsSection(catBreeds).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if !templ_7745c5c3_IsBuffer {
+				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = baseLayout(pc).Render(templ.WithChildren(ctx, templ_7745c5c3_Var41), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

app/templates/types.go

@@ -0,0 +1,21 @@
+package templates
+
+import "templ-tests/app/types"
+
+type PageContext struct {
+	Title      string
+	ActivePage string
+	User       *types.User
+}
+
+type ValidateFormContent struct {
+	Validated bool
+
+	StrValue         string
+	HasStrValueError bool
+	StrValueError    string
+
+	NumValue         string
+	HasNumValueError bool
+	NumValueError    string
+}