the code here is hyperscript, not htmx:

https://hyperscript.org

i use hyperscript because I created it and like it, but the example could just as easily use JavaScript, the point is to show that htmx respects custom validations

The docs don't seem to suggest using it for non-trivial things without hyperscript. https://htmx.org/docs/

They do suggest being able to use it without learning a lot of hyperscript, but I see the same with Svelte, where you can get by on copying and pasting a great deal. https://learn.svelte.dev/

most of the examples don't have any hyperscript in them

htmx generalizes HTML as a hypermedia, making any element a hypermedia control that can issue any type of HTTP request in response to any event and target any element in the DOM for replacement

that's the concept, improve HTML, and it gives you quite a bit more than plain HTML, but it is intentionally constrained to not go beyond that

for things beyond what that gives you, I am not afraid to recommend scripting: Fielding explicitly included scripting as an optional constraint his description of the REST-ful architecture of the web

A good example of how we like to see scripting used w/ a hypermedia system is the Sortable.js demo, which shows htmx integrating w/ Sortable.js via events, the cleanest way to integrate hypermedia controls w/ client side scripting:

https://htmx.org/examples/sortable/

we have a chapter on client-side scripting in hypermedia systems here:

https://hypermedia.systems/book/client-side-scripting/

> for things beyond what that gives you, I am not afraid to recommend scripting

I'm not suggesting that you don't. I'm suggesting that it's quite similar to SvelteKit, Remix, and now Next.js, and other form-friendly frameworks in what you'd need to know in order to do a non-trivial full stack JavaScript project that supports progressive enhancement.

The difference is that with HTMX you're not stuck in "full stack JavaScript" land. Any language that can generate HTML becomes a viable full stack option without the headaches of modern JS tools being forced into the mix.

I would likely agree, however this example makes heavy use of hyperscript, which is an associated project by the same author, but is distinct from HTMX.

How do you do validation with custom error messages without it? It seems pretty table stakes for forms to me.

Where are the docs that make it easy to avoid hyperscript, if it's usable without hyperscript? This has hyperscript sprinkled in: https://htmx.org/docs/

HTML already has a native validation API for form elements. https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_va... HTMX wraps that with some custom events and enables you to use the same API for non-form elements.

In the example above, if you need custom validation logic, you could handle the HTMX:validation:validate event with any normal JS event handler.

Of course, it's up to you to decide how much effort to put into client-side validation that can be easily bypassed.

Mostly, you validate on the server and send html with error messages back.

If you really need client-side, yes, of course you have to script it. If hyperscript is not to your taste, you use a bit of js.

That was implicit in my question. We aren't talking about writing purely server side web apps here, and it's reasonable to expect something like client side validation, given that this is meant to be an easy way to do full stack web apps. I think it is but not really easier than other major ones.

> We aren't talking about writing purely server side web apps here

Ok, but note that a big part part of the appeal of htmx is that yes, you work mostly server-side. If your use case absolutely needs client side code, htmx might not be the right fit. (But in many cases you don't need as much client-side Code as you might think at first.)

Programming languages contain English words like if, self, else, then, function, def, this, exception…

Me/my is rarer: Reminds me of VB

it's a separate project, hyperscript:

https://hyperscript.org

it's based on HyperTalk, the scripting language of HyperCard:

https://hypercard.org/

with some Web-specific syntax thrown in to make things cleaner:

  add .visible to <section.fade-in/>

Good luck having editor support, linting, formatting, intellisense or anything at all here. This is a f*ng nightmare.

Non native speaker here.

The unfamiliar programming language (which I've never used) seems to be binding some code to some type of validation event. "my" and "me" seem to refer to the input tag. "my.value" probably refers to the value of the input. If it's not foo it calls a setCustomValidity method with the input tag as the caller. Could be some built in method that you can call on any input tag or anything validatable.

Ok I just checked the link and setCustomValidity is part of the HTML5 Validation API (haven't worked on web dev in years).

I can assure you that the first person pronoun is among the first things we learn when studying English and assuming the code snippet does what I assume it does I'd say it's pretty intuitive to learn. Especially if we are comparing it to JS where "this" is not what you'd expect from using it in other language but the late-bound called of the function... except in all the cases where it isn't.

In any case, trying to guess how a programming language works is a very bad idea so it doesn't matter how obvious the language manages to be, you still should learn the documentation.