HTML 'required' attribute not working

[fullstackplus]

Hi, I'm trying out HTMX with Sinatra, using a simple submission form as an example.

I've noticed that when I submit the form using HTMX, the requiredattribute stops working on input elements — and I'm able to POST a form with empty input fields. When I remove the HTMX attributes from the button element, and submit the form the traditional way, everything works as expected.

Using aria-required="true instead of required doesn't make any difference.

What's going on? The code:

Hello, enter your email to opt in:

<%# removing the form attrs doesn't matter to HTMX magic!! %>
<form action="/" method="post">
  <ol>
    <li>
      <label for="name">Name <span class="req">*</span></label>

      <%# but it does make required attrs not work: %>
      <input name="name" maxlength="255" tabindex="1" placeholder="Your Name" type="text" aria-required="true" />
    </li>
    <li>
      <label for="email">Email <span class="req">*</span></label>
      <input name="email" spellcheck="false" maxlength="255" placeholder="name@email.com" type="email" required />
    </li>
  </ol>

  <!-- have a button POST a click via AJAX -->
 <button type="submit" hx-post="/" hx-swap="outerHTML">
  <%# <button type="submit"> %>
   <span> Submit &rarr; </span>
 </button>
</form>

[schungx]

I've realized that you must put the hx-post on the form tag for form validation to kick in.

You need to rely on the button begin submit... if you put hx-post on the button, it'll bypass validation.

It seems that validation is a "form"-thing, so if you by-pass normal form submission, you won't get validation.

This is not very clear in the docs.

[fullstackplus]

You're absolutely right, moving the hx-post up to the form solves it!

<form hx-post="/">

Admittedly, my original example was invalid because the hx-swap didn't work, either: the form stayed in place and the contents of the response was simply appended beneath. So issuing the hx-post on form level also makes the hx-swap work as intended.

But then, doesn't this defeat the stated goal of "any element can issue HTTP requests"?

[fullstackplus]

PS. This "barest-bones" example absolutely works:

<button type="submit" hx-post="/" hx-swap="outerHTML">
  <span> Submit &rarr; </span>
</button>

I'm guessing you can't use both <form action="/" method="post"> and x-post="/" within the same page (as in my OP) — which makes total sense. It's either-or, at least when one is nested below the other.

[schungx]

But then, doesn't this defeat the stated goal of "any element can issue HTTP requests"?

You can put hx-target and point it to any element you want to be the swap target.

[Telroshan]

Hey, you might also want to take a look at hx-validate if you want to force validation on non-forms, as per the doc:

Only <form> elements validate data by default, but other elements do not. Adding hx-validate="true" to <input>, <textarea> or <select> enables validation before sending requests.