Mencoba membuat Form dengan HTMX

Contoh:

<form hx-post="/submit">
  <input type="text" name="nama" required />
  <button type="submit">Kirim</button>
</form>

Ketika tombol submit diklik, HTMX akan mengirimkan permintaan POST ke URL “/submit” dengan data form sebagai payload. Respons dari server akan ditampilkan menggantikan konten form secara default.

Anda juga bisa menggunakan atribut hx-target untuk menentukan elemen mana yang akan menerima respons dari server. Misalnya:

<form hx-post="/submit" hx-target="#result">...</form>

<div id="result"></div>

Pada contoh di atas, respons dari server akan ditampilkan di dalam elemen dengan id “result”.

8.2 Validasi Form dengan HTMX

HTMX mendukung penggunaan atribut validasi bawaan HTML5 untuk memvalidasi nilai input sebelum form dikirim. Berikut adalah beberapa atribut yang sering digunakan:

• required: Memastikan field harus diisi.
• pattern: Menentukan pola (regular expression) yang harus dicocokkan.
• min dan max: Menentukan nilai minimum dan maksimum untuk input numerik.
• minlength dan maxlength: Menentukan panjang minimum dan maksimum untuk input teks.

Contoh:

<form hx-post="/submit">
  <input type="text" name="nama" required minlength="3" />
  <input type="number" name="usia" min="18" max="100" />
  <input type="email" name="email" required />
  <button type="submit">Kirim</button>
</form>

Jika nilai yang dimasukkan tidak memenuhi kriteria validasi, browser akan menampilkan pesan kesalahan bawaan dan mencegah pengiriman form.

Selain menggunakan atribut validasi bawaan, Anda juga bisa memanfaatkan ekstensi htmx-validator untuk validasi yang lebih fleksibel. Ekstensi ini memungkinkan Anda menentukan aturan validasi menggunakan atribut data-* pada elemen input.

Contoh:

<form hx-post="/submit">
  <input
    type="text"
    name="username"
    data-val="true"
    data-val-length="Username must be between 3 and 20 characters"
    data-val-length-min="3"
    data-val-length-max="20"
  />
  <button type="submit">Kirim</button>
</form>

Ekstensi htmx-validator akan memvalidasi nilai input berdasarkan aturan yang ditentukan dalam atribut data-* dan menampilkan pesan kesalahan yang sesuai jika validasi gagal.

8.3 Menangani Galat Validasi dari Server

Meskipun validasi sisi klien dapat mencegah sebagian besar kesalahan input, penting untuk tetap melakukan validasi di sisi server untuk memastikan integritas data. Jika server mendeteksi kesalahan validasi, Anda bisa mengembalikan respons dengan kode status yang sesuai (misalnya, 400 Bad Request) dan pesan kesalahan dalam format HTML.

Pada sisi klien, gunakan atribut hx-target untuk menempatkan pesan kesalahan ke dalam elemen yang ditentukan.

Contoh:

<form hx-post="/submit" hx-target="#errors">
  <input type="text" name="nama" required />
  <button type="submit">Kirim</button>
</form>

<div id="errors"></div>

Jika server mengembalikan respons dengan kode status 400, HTMX akan menampilkan pesan kesalahan di dalam elemen dengan id “errors”.

Untuk pengalaman pengguna yang lebih baik, Anda bisa menyertakan pesan kesalahan spesifik untuk setiap field yang tidak valid dalam respons server. Misalnya:

<!-- Respons server jika validasi gagal -->
<div id="errors">
  <ul>
    <li>Nama harus diisi</li>
    <li>Email tidak valid</li>
  </ul>
</div>

Dengan menampilkan pesan kesalahan yang jelas dan spesifik, pengguna akan lebih mudah memahami apa yang perlu diperbaiki dalam input mereka.

Terakhir, jika form Anda menyertakan input file, Anda perlu menangani kasus di mana nilai input file hilang setelah form dikembalikan dengan pesan kesalahan. Teknik “Preserving File Inputs after Form Errors” dapat membantu mengatasi masalah ini.

Caranya adalah dengan memindahkan input file ke luar elemen form dan mengaitkannya menggunakan atribut form. Contoh:

<input form="myForm" type="file" name="avatar" />

<form id="myForm" hx-post="/submit" hx-target="#errors">
  <input type="text" name="nama" required />
  <button type="submit">Kirim</button>
</form>

<div id="errors"></div>

Dengan struktur seperti ini, nilai input file akan tetap dipertahankan meskipun form dikembalikan dengan pesan kesalahan.

Demikian penjelasan yang lebih mendetail mengenai penggunaan form di HTMX. Dengan memanfaatkan fitur-fitur yang disediakan oleh HTMX, seperti atribut hx-, validasi HTML5, penanganan galat dari server, dan teknik menjaga nilai input file, Anda bisa menciptakan pengalaman pengguna yang lebih baik dan interaktif saat berinteraksi dengan form dalam aplikasi web Anda.