4 ms·
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/ h
by gavinray 6y ago
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/ 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.
- recursivedoubts 6y agoI'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.
- gavinray 6y agoAhh 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?
- recursivedoubts 6y agoyeah, you could use the json encoding extension as a starting point: https://htmx.org/extensions/json-enc/ https://htmx.org/extensions/json-enc/
- gavinray 6y agoI 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/XMLHttpRequest/setRequestHeader https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequ...
- recursivedoubts 6y agolooks 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?
- gavinray 6y agoSure =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
- recursivedoubts 6y agoi'd love a graphql extension for the next release, if you are interested
- deleted 6y ago[deleted]
- schwartzworld 6y agoFront-end validations should always be viewed as a suggestion. the server is the real gatekeeper
- gavinray 6y agoI 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.
- dgut 6y agoThe 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.