Here’s a stripped down demo. https://github.com/chromalchemy/groundedsol/blob/contact-form/src/gs/groundedsol/demo.clj First form posts, but doesn’t update. Second form has js callback, but goes to new raw page.

There are a couple ways to do it--with or without htmx. If you don't use htmx, you can have the form submit a regular POST request to your backend endpoint. If there are errors, that endpoint redirects back to the original page and includes error codes etc in the query params. Something like this:

(defn handle-form-submission [{:keys [params] :as ctx}]
  (let [error (cond
                (empty? (:name params)) "invalid-name"
                ...)]
    (when-not error
      (do-something ctx))
    (if error
      {:status 303
       :headers {"location" (str "/my-page?error=" error)}}
      {:status 303
       :headers {"location" "/next-page"}})))

(defn my-form [{:keys [::error] :as ctx}]
  [:div
   (case error
     "invalid-name" [:div "that name is invalid"]
     nil)
   (biff/form ...)])

(defn handle-form-submission [{:keys [params] :as ctx}]
  (let [error (cond
                (empty? (:name params)) "invalid-name"
                ...)]
    (when-not error
      (do-something ctx))
    (if error
      (my-form (assoc ctx))
      (success-message ctx))))

(defn handle-form-submission [{:keys [params] :as ctx}]
  (let [error (cond
                (empty? (:name params)) "invalid-name"
                ...)]
    (when-not error
      (do-something ctx))
    (if error
      (my-form (assoc ctx))
      {:status 200
       :headers {"HX-Redirect" "/next-page"}})))

@U7YNGKDHA Thank you for these patterns! They helped me orient to how to structure form server-side validation code via the handler fn and passing errors. I got an more evolved demo working just right! but without recaptcha and using :hx-swap and :hx-post directly on form… But when I go to enable re-captcha, I’m back to square 1, not knowing how to update form in place. 😭 Recaptcha is supposed to call the embeded js callback. Which should handle the update. If my callback is

function submitContact(token) { document.getElementById('contact-form').submit();} 

function submitContact(token) { htmx.ajax('POST', '/send-contact', {target:'#contact-form', swap:'outerHTML'});
}

POST  405 (Method Not Allowed)

[email protected]:1 Response Status Error Code 405 from /send-contact

Maybe there is minimum viable example of a event/callback that updates an form with htmx semantics somewhare, or I will try to build one again? Unless there’s some other complexity about re-captcha implementation I’m missing.

Rant: In a world of jangly, disjointed, repetative, brittle, inscrutable, boilerplate html/css/js, Biff’s reserved simplicity naturally leaves open many sharp edges, Despite htmx’s welcome affordances, I don’t yet have a great working model of http stateful flow yet, and the whole api surface area is feeling spread out and obtuse (not Biff’s fault). Of course validated captcha’d forms are probably the most complex thing, and I haven’t done all the tutorials from the ground up.. I’m just disappointed that I’m losing days to something I never learned to do properly in the PHP days. That’s what I get for trying to lean too hard on frameworks… That being said, the server side integration and seeing printouts in the terminal is cool, and clarifying. Need to learn to embrace the ctx and middleware patterns and practice more routing.

Should the js callback just submit the form? If it calls htmx.ajax('POST'....) Does that imply “submitting” the form? Or does it really need to to both, if it going to invoke htmx helpers?

This js for captcha callback worked. (sort of)

function submitContact(){
    const event = new Event('verified');
    const elem = document.querySelector("#contact-form");
    elem.dispatchEvent(event);
}

Alternatively any feedback on how/where to use htmx.ajax() fn in this “submit form” callback context?

reading through your messages now, responding as I go your htmx Ajax code looks correct to me. the error looks odd though--says you're getting a 405 error on the /contact endpoint, not /send-contact. however the htmx error has the correct /send-contact endpoint. not sure what's going on there.

POST is what you want, not GET

do you get a logging statement from the callback if you don't submit a request at all?

just looked at the code you linked. nothing jumps out at me; it looks fine.

I have found integrating with recaptcha to be quite fiddly at times. maybe tomorrow morning I can try to take the biff example app and do the recaptcha integration with htmx to see if I run into similar issues (if not, at least there'll be a working example then)

you shouldn't need to call .submit() if you're already calling htmx.ajax. though I haven't ever used htmx.ajax myself I don't think--would be worth me giving it a try

re: will reloading the form with htmx break recaptcha--good point. I don't know. need to think about that/experiment will try to finish reading your other messages tonight

if it's convenient to just reload the page, that will probably be easiest. honestly if you're OK using full page reloads in general for this form, it sounds like that would be a much easier approach. clearly there's some jankiness around getting htmx and recaptcha to play nicely. though again I'd be happy to try to get a simple htmx-recaptcha example working myself--it should only take a few minutes to try at least, and if I also can't get it to work then maybe we just admit defeat haha

I'm thinking again about "biff from scratch", an idea I had to write a series of guides showing how to do clojure web dev my composing the pieces yourself. something like that maybe would help with getting the fundamentals of http etc

Here's a working example: https://github.com/jacobobryant/biff/compare/master...htmx-recaptcha-example you can start a new biff project and apply those changes to home.clj if you want to run it. Notes: • I started out looking at the https://htmx.org/api/#ajax and noticed that there's an optional source parameter. I think that's why htmx.ajax wasn't working for you: if you do e.g. htmx.ajax('POST', '/foo', '#my-form'), that tells htmx that you want #my-form to be the target, but it doesn't make htmx include form parameters from #my-form in the request. You'd need to pass in an options map as the third parameter to htmx.ajax and set both source and target. • I was in the process of doing that, but then I came across this tidbit in the https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event: "The submit event fires when: [...] a script calls the form.requestSubmit() method. However, the event is not sent to the form when a script calls the form.submit() method directly." In other words, since htmx listens to the submit event on forms by default, form.requestMethod() will tell htmx to do its thing, but form.submit() will bypass htmx and submit the form the usual way. So in the example code, I added :hx-post and :hx-swap attributes to the form and then changed the recaptcha callback to do a requestSubmit() instead of a submit(). Then it worked. • The final bit: you were correct that the recaptcha form doesn't work if you re-render the form with htmx after a validation error without doing a full page load. When the recaptcha script loads, it looks for the first element with the g-recaptcha class and "renders"/binds itself to that element. So if you subsequently re-render that form, you have to tell recaptcha explicitly to re-initialize itself as well. I used hyperscript to call the grecaptcha-render() method when the form gets re-rendered after a validation failure (see the https://developers.google.com/recaptcha/docs/invisible). • I made it so if you type as the email address it'll be treated as a validation error. I was able to submit the form with as many times as I wanted, and then once I submitted it with another address, it showed the success message. Hope that helps!

Wow, incredible 🔥:star-struck: Great engineering. I was bouncing around but not so thorough! I was able to eventually try the html.ajax() call again and found the source parameter too. And seemed to be getting the first reload ok, but then ran into that captcha error. Thank you so much for really investigating the captcha dynamic! I slept on it and was resolved to rebuild with full page reloading, after looking closer at the example code and seeing more nuance in the handlers, and zero htmx there. I should have followed those more strictly, and was I guess tantilized and confused by the htmx options overlapping. I will practice to understand the classic request/routing/reload better. But it feels encouraging to know that htmx is working and available in this context. The captcha has been a core requirement of this simple site I’m rebuilding for family, which I refactored from a php site because I didn’t want to try to grok the server-side dynamics there. It’s been a big sticking point for me, and I’m thrilled to get proper implementation in place. Will work through you examples and report back. Thanks again for taking to time to look into it (again)!! 🙌:skin-tone-2:.

awesome, glad it's working! good luck with the rest of the project too! did you fix the recaptcha "site key not valid" problem? I'm guessing you just need to go to the recaptcha admin settings and add the domain to the whitelist.

Nothing changed. Not sure what was causing that, but rebooting everything fixed it.