hx-include or form does not seem to respect validation rules

[markgarrigan]

Maybe I'm doing it wrong but neither of these work.

https://replit.com/@markgarrigan/hx-include-form

This doesn't respect the required attribute and also does not send the form data

<div id="content">
  <form id="myform">
    <input type="text" name="name" required>
  </form>
  <button form="myform" hx-post="/register" hx-trigger="click once" hx-target="#content">
    Submit
  </button>
</div>

This doesn't respect the required attribute but sends the form data

<div id="content">
  <form id="myform">
    <input type="text" name="name" required>
  </form>
  <button hx-include="#myform" hx-post="/register" hx-trigger="click once" hx-target="#content">
    Submit
  </button>
</div>

Is this intended, am I doing it wrong, or not intended?

Thanks!!

[Telroshan]

Hey,

First example:

• You likely want to put the hx-post on the form itself anyway, because with that current setup you have, hitting Enter in the input field will do a standard form submit instead of an htmx-powered one, i.e. here make a full page reload while making a GET request towards the current page URL, which is likely undesired.
• If you try hitting Enter in the empty input, you'll notice the default validation triggers as well
• If you instead do the following:

<form id="myform" hx-post="/register.html" hx-target="#content">
    <input type="text" name="name" required>
</form>
<button form="myform">
    Submit
</button>

You will benefit from the default input validation happening as expected, and the form always doing a htmx request as well
If you need the form to trigger only once, you could add a hx-trigger="submit once" on your form too (to replace the click once you had on the button itself)

Second example:

• Similarly to the first example, you likely want to put the hx attributes on the form itself
• Though, with that current code you have, you could add hx-validate="true" to your button, which will prevent the request from happening if your included inputs are invalid
• See the validation events fired by htmx btw, such as htmx:validation:validate

Hope this helps!

[markgarrigan]

@Telroshan Thanks! This clarification makes sense. I'll give this a shot.