feat: adding errors to form elements

attrib.go

@@ -492,6 +492,11 @@ func Integrity(v string) Node {
 	return Attribute("integrity", v)
 }
 
+// NoValidate sets the novalidate attribute for form elements.
+func NoValidate() Node {
+	return Attribute("novalidate")
+}
+
 // CrossOrigin sets the crossorigin attribute for elements.
 func CrossOrigin(v string) Node {
 	return Attribute("crossorigin", v)

components/forms/datalist.go

@@ -23,6 +23,8 @@ type DatalistProps struct {
 	Disabled bool
 	// Indicator is the indicator of the datalist
 	Indicator string
+	// Error is the error of the datalist
+	Error error
 }
 
 // Datalist is a component that displays a datalist.
@@ -35,6 +37,7 @@ func Datalist(props DatalistProps, children ...htmx.Node) htmx.Node {
 				Name:        props.Name,
 				Placeholder: props.Placeholder,
 				Disabled:    props.Disabled,
+				Error:       props.Error,
 			},
 			htmx.List(props.ID),
 			htmx.HxGet(props.URL),

components/forms/radio.go

@@ -1,6 +1,9 @@
 package forms
 
-import htmx "github.com/zeiss/fiber-htmx"
+import (
+	htmx "github.com/zeiss/fiber-htmx"
+	"github.com/zeiss/pkg/utilx"
+)
 
 // RadioProps represents the properties for a radio element.
 type RadioProps struct {
@@ -9,14 +12,16 @@ type RadioProps struct {
 	Value      string          // The value of the radio element.
 	Checked    bool            // Whether the radio element is checked.
 	Disabled   bool
+	Error      error
 }
 
 // Radio generates a radio element based on the provided properties.
 func Radio(p RadioProps, children ...htmx.Node) htmx.Node {
 	return htmx.Input(
 		htmx.Merge(
 			htmx.ClassNames{
-				"radio": true,
+				"radio":       true,
+				"radio-error": utilx.NotEmpty(p.Error),
 			},
 			p.ClassNames,
 		),

components/forms/text.go

@@ -8,12 +8,12 @@ import (
 // TextInputProps represents the properties for a text input element.
 type TextInputProps struct {
 	ClassNames  htmx.ClassNames // The class names for the text input element.
-	Name        string          // The name of the text input element.
-	Value       string          // The value of the text input element.
 	Disabled    bool            // Whether the text input element is disabled.
-	Placeholder string          // The placeholder of the text input element.
+	Error       error           // The error message of the text input element.
 	Icon        htmx.Node       // The icon of the text input element.
-	Error       string          // The error message of the text input element.
+	Name        string          // The name of the text input element.
+	Placeholder string          // The placeholder of the text input element.
+	Value       string          // The value of the text input element.
 }
 
 // TextInput returns a text input element based on the provided properties.

components/validate/errors.go

@@ -13,14 +13,14 @@ import (
 type Errors validator.ValidationErrors
 
 // Field returns the error message for the provided field.
-func (e Errors) Field(name string) string {
+func (e Errors) Field(name string) error {
 	for _, err := range e {
 		if err.Field() == name {
-			return err.Error()
+			return err
 		}
 	}
 
-	return ""
+	return nil
 }
 
 // HasError returns true if the field has an error.

examples/main.go

@@ -122,6 +122,7 @@ func RegisterForm(props RegisterFormProps) htmx.Node {
 		htmx.HxPost("/register"),
 		htmx.HxSwap("outerHTML"),
 		htmx.Target("cloesest div"),
+		htmx.NoValidate(),
 		forms.FormControl(
 			forms.FormControlProps{},
 			forms.FormControlLabel(
@@ -154,6 +155,37 @@ func RegisterForm(props RegisterFormProps) htmx.Node {
 				),
 			),
 		),
+		forms.FormControl(
+			forms.FormControlProps{},
+			forms.FormControlLabel(
+				forms.FormControlLabelProps{},
+				forms.FormControlLabelText(
+					forms.FormControlLabelTextProps{
+						ClassNames: htmx.ClassNames{
+							"label-text": true,
+						},
+					},
+					htmx.Text("Option 1"),
+				),
+			),
+			forms.Radio(
+				forms.RadioProps{
+					Name:  "option",
+					Value: "1",
+					Error: props.errors.Field("option"),
+				},
+				htmx.Required(),
+			),
+			htmx.If(
+				props.errors.HasError("option"),
+				htmx.Div(
+					htmx.ClassNames{
+						"text-error": true,
+					},
+					htmx.Text("A valid option is required."),
+				),
+			),
+		),
 		buttons.Button(
 			buttons.ButtonProps{
 				Type: "submit",
@@ -764,7 +796,8 @@ func (w *webSrv) Start(ctx context.Context, ready server.ReadyFunc, run server.R
 
 		app.Post("/register", htmx.NewCompFuncHandler(func(c *fiber.Ctx) (htmx.Node, error) {
 			type Form struct {
-				Email string `json:"email" validate:"required,email"`
+				Email  string `json:"email" form:"email" validate:"required,email"`
+				Option string `json:"option" form:"option" validate:"required"`
 			}
 
 			var f Form