Hacker News Reader

Comment by gavinray | Hacker News Reader

I've heard of Intercooler before and saw htmx on Github trending a few weeks ago.

A question about this example: https://htmx.org/examples/inline-validation/

This paradigm revolves around sending validation requests to server-side endpoints, is there any reason to put that load on the server rather than validate it on the page prior to submit with JS? Or scalability issues?

Not being antagonistic, genuinely curious because I've not seen inline validation done this way.

View on HN

I'm not dogmatic about it. Some validation has to be done on the server side (e.g. unique emails) and any validation has to be redone on the server anyway since the client side isn't a trusted computing environment, but I can see doing both.

Ahh got it, yeah in this case that makes a ton of sense. No way to know with emails about uniqueness constraints until it hits the backend anyways.

I've been playing around with local demo, is it possible through extensions to make a wrapper that can perhaps compose GraphQL query inputs from forms?

yeah, you could use the json encoding extension as a starting point:

https://htmx.org/extensions/json-enc/

I was just trying that, it seemed not to be working for some reason.

I manually copy-pasted the source code into my app, and got:

    htmx.min.js:1 TypeError: Cannot set property 'Content-Type' of undefined
        at Object.encodeParameters ((index):11)
        at htmx.min.js:1

The code for it is:

xhr.requestHeaders['Content-Type'] = 'application/json'

But I believe it should be

xhr.setRequestHeader('Content-Type', 'application/json')

When I do this, it seems to work

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequ...

looks like there's a bug in the json-enc extension: it's relying on the test mock which has a requestHeaders property that a real xhr won't.

so the tests passed but it doesn't work irl...

good catch! want to submit a pull request fix?

Sure =D

Done!

Also this extension API is pretty straightforward, the element reference and parameters are right in the args so it's an easy mapping to GraphQL query strings from there. Awesome!

I was able to get a minimal version working using just this (with json-enc extension patch):

    <input
      type="text"
      name="query"
      hx-ext="json-enc"
      hx-post="http://localhost:8080/v1/graphql"
      hx-trigger="keyup changed delay:500ms"
      hx-target="#search-results"
      placeholder="<GRAPHQL QUERY TEXT HERE>"
    />
    <div id="search-results"></div>

Pretty cool

i'd love a graphql extension for the next release, if you are interested

Yeah, definitely game to help out there =)

Hell yea

Front-end validations should always be viewed as a suggestion. the server is the real gatekeeper

I should have rephrased it haha, I more meant the act of sending each set of keystrokes validation as a server-side request. No doubt that the backend is going to be the ultimate judge when "submit" is pressed.

The idea behind libs like htmx is that you get to have some of the niceties of a SPA, without writing any JS and requiring minimal computational power from the client.

Reply on news.ycombinator.com