https://htmx.org logo
Powered by
# htmx-general
  • m
    Seems like you could render the error as html. Do you want a client side validation pre request?
  • m
    No it looks in the existing dom
  • a
    i want to prevent the submit (like disabling the button) if the hx-get (server-side validation) returns an "flagged" as invalid
  • b
    Hey everyone, I would like to learn HTMX but I am newer to web development. What are some key web development concepts I should learn before diving into HTMX? Currently I have been working through this guide by Mozilla https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web
  • b
    So HTMX will let you improve an existing application, so I'd probably recommend building a simple web application to start with and then look to add HTMX to it. Do you have any programming experience? If so, what's your preferred language?
  • b
    Yes, python. I have a good grasp of the fundamentals but no experience with a web framework like django, flask or fastAPI
  • p
    thx... i'm also running into some potential issues with SSE and hx-boost interacting. The eventstream is not closed and is usually able to self-recover, but then you may have two!
  • b
    So of those, I'd probably go with Django or Flask. FastAPI will work but you won't use a lot of its features, and to be honest, you'll be effectively using Starlette (which it's based on). The Django tutorial is pretty good, so that's worth going through. I'd go for that in the first instance - a lot of the concepts will apply to Flask or any other framework.
  • m
    Ah, got it. Easiest thing might be to trigger an event w/ the HX-Trigger response header, and have the button listen for it (say on the body or closest form) and disable itself
  • m
    although you want to prevent form submission in general
  • m
    even people hitting enter on inputs
  • m
    🤔
  • m
    Still might use an event and then set an attribute on the closest form, something like @form-valid='false', and then use that to filter the form submission
  • m
    thinking on it, the htmx way here would be to just allow the form to submit and re-render the error
  • m
    rather than trying to stop it
  • m
    simpler and you can reuse the validation server side
  • a
    would it be fast enough? because validating each separately is ultra fast
  • w
    This is a bit of an edge case and not sure if HTMX wants to consider it, but if you have the following:
    Copy code
    <form>
  <select name="example" multiple required>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
  </select>
</form>

<form
  hx-post="/endpoint/"
  hx-include="[name='example']"
>
  <input name="input1" value="A">
</form>
    where, crucially, 
    hx-include
    refers to an element that is 1) 
    required
    but 2) does not have any selected values. HTML5 form validation does not pick this up because we're not submitting the first form. HTMX just hangs (doesn't make a POST request and doesn't log any errors). I don't know if it's desired that HTMX write something to the console, but I spent some time trying to understand my my 
    hx-includes
    was preventing HTMX from working, so I figured I'd share. If I should create an issue on the repo let me know.
  • b
    y'all should rename hyperscript to HYPEscript
  • m
    yep, that's a bug
  • m
    Typically you would have a validation or two that needed to be done server side (e.g. email uniqueness) that you would use htmx for. For client side stuff, htmx will validate before submitting: https://htmx.org/docs/#validation. Depending on how big your form is, submitting the whole thing and simply doing traditional server side validation for everything can be very fast as well.
  • m
    i actually tried to call it that at one point and it was rejected for being too close lexically to typescript
  • m
    i believe npm rejected it
  • a
    Hi! I can see that the docs say: > if you prefer, you can use the data- prefix when using htmx: > 
    <a data-hx-post="/click">Click Me!</a>
  • a
    However, it seems most people don't use this and just write hx-post. Have you found any issues with doing that, since technically hx-post is not a valid HTML attribute?
  • m
    all browsers support the non-
    data
    attribute, but if you want pure, validated HTML, you should use 
    data
  • m
    some people put HTML validation tools in their build chain, which enforces this as well as other things
  • m
    we are going to catch React folks, just a matter of time
  • a
    thank you! i don't use any validation tools; though i am wondering about issues with IDEs, etc. for example pycharm highlights that attribute in yellow and says 'attribute hx-post is not allowed here'.
  • a
    i guess i could just disable that warning, but just checking if that ends up being an annoyance during development
1...531532533...1146Latest