こんにちは。エキサイトでデザイナーをしている齋藤です。
今回は、htmxでHTMLの制約検証APIを使用して検査合格後にリクエストを発行する方法をご紹介します。
なお、本稿の内容は v2.0.6（2025年7月14日時点の最新版）のhtmxを前提としています。
htmxとは
htmxは、HTMLタグに専用の属性を記述することで、複雑なJSを記述せずにAJAXリクエストの発行を可能にするライブラリです。
マークアップの延長のような感覚でAJAXリクエストを実装できるのがhtmxの強みです。
<!-- クリックするとPOSTリクエストが発行される --> <button type="button" hx-post="/sample" hx-trigger="click"> 送信 </button>
実現したいこと
実現したいことを整理します。
HTMLでは制約検証APIが提供されており、クライアントサイドでの簡単なバリデーションを行うことができます。
以下は、inputタグのminlength属性を使用して最小の文字数の制約を設定する実装例です。
<!-- 入力値が4文字を下回る場合はフォームリクエストが実行できない --> <form> <label> 座右の銘 <input type="text" name="motto" minlength="4"> </label> ... </form>
一方で今回実現したいのは、htmxを使用してリクエストを発行する場合にも、制約検証APIを使用して検査を行うことです。
<!-- 制約に違反する場合はリクエストが発行されないようにしたい --> <input type="text" name="motto" hx-post="/sample" hx-trigger="keyup changed delay:2s" minlength="4" >
hx-varidate属性でHTMLの制約検証APIの検査を有効化できる
hx-varidate属性でtrueを指定すると、HTMLの制約検証APIを使用した検査を有効化できます。
構文は以下の通りです。hx-validate属性を指定しない場合はfalseの挙動になります。
hx-validate="<Boolean>"
例えば、「入力値は4文字以上でなければならない」という制約をminlength属性で設定した上で、hx-validate="true"を指定すると、制約に違反している場合はリクエストが発行されなくなります。
<!-- 制約に違反する場合はリクエストが発行されない --> <input type="text" name="motto" hx-post="/sample" hx-trigger="keyup changed delay:2s" hx-validate="true" minlength="4" >
注意点
なお、minlengthなどの検証関連属性やhx-validateの値はブラウザ上で改ざんできてしまうため、サーバーサイドでも検査を行うことを推奨します。
また、クライアントサイドでのバリデーションはユーザ体験を向上させる目的もあるため、制約違反の場合はその旨を表示することが大切であると考えます。
バリデーションを視覚的に表す場合は、Alpine.jsと組み合わせる方法もあります。
まとめ
今回は、htmxでHTMLの制約検証APIを使用して検査合格後にリクエストを発行する方法をご紹介しました。
htmxを使用される方の一助となれば幸いです。ご精読ありがとうございました。
