Added form field statuses during validation.

controller/form.go

@@ -33,10 +33,17 @@ func (f FormSubmission) HasErrors() bool {
 	return len(f.Errors) > 0
 }
 
-func (f FormSubmission) FieldHasError(fieldName string) bool {
+func (f FormSubmission) FieldHasErrors(fieldName string) bool {
 	return len(f.GetFieldErrors(fieldName)) > 0
 }
 
+func (f *FormSubmission) SetFieldError(fieldName string, message string) {
+	if f.Errors == nil {
+		f.Errors = make(map[string][]string)
+	}
+	f.Errors[fieldName] = append(f.Errors[fieldName], message)
+}
+
 func (f FormSubmission) GetFieldErrors(fieldName string) []string {
 	if f.Errors == nil {
 		return []string{}
@@ -50,6 +57,16 @@ func (f FormSubmission) GetFieldErrors(fieldName string) []string {
 	return errors
 }
 
+func (f FormSubmission) GetFieldStatusClass(fieldName string) string {
+	if f.IsSubmitted {
+		if f.FieldHasErrors(fieldName) {
+			return "is-danger"
+		}
+		return "is-success"
+	}
+	return ""
+}
+
 func (f *FormSubmission) setErrorMessages(form interface{}, err error) {
 	// Only this is supported right now
 	ves, ok := err.(validator.ValidationErrors)
@@ -86,6 +103,6 @@ func (f *FormSubmission) setErrorMessages(form interface{}, err error) {
 		}
 
 		// Add the error
-		f.Errors[fieldName] = append(f.Errors[fieldName], message)
+		f.SetFieldError(fieldName, message)
 	}
 }

controller/htmx.go

@@ -34,10 +34,11 @@ type (
 		Trigger            string
 		TriggerAfterSwap   string
 		TriggerAfterSettle string
+		// TODO: No content 204 response?
 	}
 )
 
-func NewHTMXRequest(ctx echo.Context) HTMXRequest {
+func GetHTMXRequest(ctx echo.Context) HTMXRequest {
 	return HTMXRequest{
 		Enabled:     ctx.Request().Header.Get(HTMXHeaderRequest) == "true",
 		Trigger:     ctx.Request().Header.Get(HTMXHeaderTrigger),

controller/page.go

@@ -44,6 +44,12 @@ type Page struct {
 	// This is what the controller uses to pass the content of the page.
 	Data interface{}
 
+	// Form stores a struct that represents a form on the page.
+	// This should be a struct with fields for each form field, using both "form" and "validate" tags
+	// It should also contain a Submission field of type FormSubmission if you wish to have validation
+	// messagesa and markup presented to the user
+	Form interface{}
+
 	// Layout stores the name of the layout base template file which will be used when the page is rendered.
 	// This should match a template file located within the layouts directory inside the templates directory.
 	// The template extension should not be included in this value.

routes/contact.go

@@ -27,10 +27,10 @@ func (c *Contact) Get(ctx echo.Context) error {
 	p.Layout = "main"
 	p.Name = "contact"
 	p.Title = "Contact us"
-	p.Data = ContactForm{}
+	p.Form = ContactForm{}
 
 	if form := ctx.Get(context.FormKey); form != nil {
-		p.Data = form.(ContactForm)
+		p.Form = form.(ContactForm)
 	}
 
 	return c.RenderPage(ctx, p)
@@ -59,7 +59,7 @@ func (c *Contact) Post(ctx echo.Context) error {
 		return c.Get(ctx)
 	}
 
-	htmx := controller.NewHTMXRequest(ctx)
+	htmx := controller.GetHTMXRequest(ctx)
 
 	if htmx.Enabled {
 		return ctx.String(http.StatusOK, "<b>HELLO!</b>")

templates/components/forms.gohtml

@@ -2,8 +2,8 @@
     <input type="hidden" name="csrf" value="{{.CSRF}}"/>
 {{end}}
 
-{{define "form-field-errors"}}
-    {{range .}}
+{{define "field-errors"}}
+    {{- range .}}
         <p class="help is-danger">{{.}}</p>
-    {{end}}
+    {{- end}}
 {{end}}

templates/pages/contact.gohtml

@@ -3,17 +3,17 @@
         <div class="field">
             <label for="email" class="label">Email address</label>
             <div class="control">
-                <input id="email" name="email" type="email" class="input" value="{{.Data.Email}}">
+                <input id="email" name="email" type="email" class="input {{.Form.Submission.GetFieldStatusClass "email"}}" value="{{.Form.Email}}">
             </div>
-            {{template "form-field-errors" (.Data.Submission.GetFieldErrors "email")}}
+            {{template "field-errors" (.Form.Submission.GetFieldErrors "email")}}
         </div>
 
         <div class="field">
             <label for="message" class="label">Message</label>
             <div class="control">
-                <textarea id="message" name="message" class="textarea">{{.Data.Message}}</textarea>
+                <textarea id="message" name="message" class="textarea {{.Form.Submission.GetFieldStatusClass "message"}}">{{.Form.Message}}</textarea>
             </div>
-            {{template "form-field-errors" (.Data.Submission.GetFieldErrors "message")}}
+            {{template "field-errors" (.Form.Submission.GetFieldErrors "message")}}
         </div>
 
         <div class="field is-grouped">