Be able to swap content on errors about htmx

[1cg]

Hi Anthony,

I am working on an approach for exactly this. It is going to take me a bit to get it right, but I think you will be happy with the results. I will keep this issue open until I'm ready to discuss it.

[1cg]

@agraddy totally understand.

Your other options are a simple extension that handles the error.htmx error, or simply a javascript event handler on the body for the same event.

I'm trying to keep htmx as simple as possible and make it open and extensible for all the rest.

Should also mention that you can call out to javascript from a hyperscript handler:

<form hx-post="/ajax/contact" _="on error.htmx(errorInfo) call myJavascriptMethod(errorInfo)">

and just use hyperscript as the glue between the events and the javascript logic.

[1cg]

@agraddy here is a preview of what's coming in 0.1:

https://dev.htmx.org/docs/#hyperscript

[agraddy]

Thanks for following up. That does appear to solve the issue. Having a new language isn't really appealing to me personally; I'd rather just write javascript. One of the initial draws of HTMX for me was its simplicity and that it wasn't trying to fully recreate javascript functionality in HTML. It handled the most important use case very efficiently and if needed, you could write your own extension.

I could see how a lot of people would find hyperscript appealing but it's just not for me. That being said, it does appear to solve the issue that I brought up so I believe this can be marked as solved (I'm not sure what your protocol is for closing issues - I don't want to prematurely close the issue since you had said you were keeping it open - I'll leave the status of the issue up to you).

Thanks!

[agraddy]

Just for future reference for anybody finding this when searching for how to handle errors. I'm assuming the proposed solution for the scenario I originally gave is that you would write code like this (I'm not sure if this works but I believe this is the goal):

<form hx-post="/ajax/contact" _="on error.htmx(errorInfo) add errorInfo to .messages">
    <div class="messages"></div>
    <div>
        <label>Name</label>
        <input type="text" name="name" value="" />
    </div>
    <div>
        <label>Email</label>
        <input type="text" name="email" value="" />
    </div>
    <div>
        <label>Message</label>
        <textarea name="message"></textarea>
    </div>
    <div>
        <input type="submit" value="Send" />
        <span class="loading"></span>
    </div>
</form>

[bencroker]

One more comment before closing this issue is that you can simply have your server respond with a 200 status:

STATUS: 200
<p class="error">All fields are required.</p>