Set status code when rendering component

[JSaterdalen]

Hi all, how would I return a specific status code when rendering a templ component? The following code works but I'm getting an error about the header being redundant: superfluous response.WriteHeader call

mux.HandleFunc("/game", func(w http.ResponseWriter, r *http.Request) {
                 ...

		// Get the date from the form
		date := r.Form.Get("date")
		if date == "" {
			w.WriteHeader(http.StatusUnprocessableEntity)
			components.DateValidation().Render(r.Context(), w)
		}
}

[a-h]

You must have already written a status code to the writer, or have already written to the body somewhere else in the code.

If you write something to the body before you call WriteHeader, it will default to 200.

I would check all the validation errors at the top of the handler, write the appropriate status code, then write the body contents.

[JSaterdalen]

You're right, I had a WriteHeader further down that I missed...

I guess the core of my question then is: what's the proper way to do a form validation error with templ and htmx? In my example, sending a status code of 4xx or 5xx will prevent htmx from processing the request. I feel like I should be giving a 422 on form validation errors and using templ to display an error message.

[a-h]

I would have always used status 200, and have done since the 1900's, but I could have been doing it wrong the whole time. 😁

If you find a definitive answer, I'd be interested in what that is.

I checked the Hypermedia Systems book, but didn't see anything specific in there.

[a-h]

re: validation, I cover it using HTMX and templ in the talk I did at Big Sky Dev Con, see https://templ.guide/media/

It uses the approach of creatinf a model that has validation on it:

type Model struct {
	Initial   bool
	UserName  string
	Email     string
	Error     string
}

func (m *Model) ValidateUserName() (msgs []string) {
	if m.Initial { return }
	if m.UserName == "" {
		msgs = append(msgs, "Username is required")
	}
	return msgs
}

func (m *Model) UserNameHasError() bool {
	return len(m.ValidateUserName()) > 0
}

func (m *Model) ValidateEmail() (msgs []string) {
	if m.Initial { return }
	if m.Email == "" || !strings.Contains(m.Email, "@") {
		return append(msgs, "Email is required")
	}
	return msgs
}

func (m *Model) EmailHasError() bool {
	return len(m.ValidateEmail()) > 0
}

Then, getting the view to display the error summary:

package usersadd

templ View(m *Model) {
	<h1>Add User</h1>
	<ul>
		<li><a href="/users" hx-boost="true">Back to Users</a></li>
	</ul>
	<form id="form" action="/users/add" method="post" hx-boost="true">
		<div id="username-group" class={ "form-group", templ.KV("has-error", m.UserNameHasError()) }>
			<label for="username">Username</label>
			<input type="text" id="username" name="username" class="form-control" placeholder="Username" value={ m.UserName }/>
		</div>
		<div id="email-group" class={ "form-group", templ.KV("has-error", m.EmailHasError()) }>
			<label for="email">Email</label>
			<input type="email" id="email" name="email" class="form-control" placeholder="Email" value={ m.Email }/>
		</div>
		<div id="validation">
			if m.Error != "" {
				<p class="error">{ m.Error }</p>
			}
			if msgs := m.Validate(); len(msgs) > 0 {
				@ValidationMessages(msgs)
			}
		</div>
		<input type="submit" value="Add"/>
	</form>
}

The first access of the form is always a GET request, so set the "initial" flag on the model so that you don't get validation errors immediately on accessing the form.

type Handler struct {
	DB *db.DB
}

func (h *Handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
	switch r.Method {
	case http.MethodGet:
		h.Get(w, r)
	case http.MethodPost:
		h.Post(w, r)
	default:
		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
	}
}

func (h *Handler) Get(w http.ResponseWriter, r *http.Request) {
	h.DisplayForm(w, r, &Model{
		Initial: true,
	})
}

func (h *Handler) DisplayForm(w http.ResponseWriter, r *http.Request, m *Model) {
	layout.Handler(View(m)).ServeHTTP(w, r)
}

And handle the POST:

func (h *Handler) Post(w http.ResponseWriter, r *http.Request) {
	err := r.ParseForm()
	if err != nil {
		http.Error(w, err.Error(), http.StatusBadRequest)
		return
	}

	m := &Model{}
	err = schema.NewDecoder().Decode(m, r.PostForm)
	if err != nil {
		http.Error(w, err.Error(), http.StatusBadRequest)
		return
	}
	if len(m.Validate()) > 0 {
		h.DisplayForm(w, r, m)
		return
	}

	user := db.User{
		UserName: m.UserName,
		Email:    m.Email,
	}
	if err = h.DB.Save(user); err != nil {
		m.Error = "Failed to save the user. Please try again."
		h.DisplayForm(w, r, m)
		return
	}

	http.Redirect(w, r, "/users", http.StatusSeeOther)
}

Probably need some better examples in the docs!

[JSaterdalen]

@a-h Thanks so much, I appreciate the detail!