Kurangnya Pemanfaatan Validasi Form HTML

 (expressionstatement.com)
2 poin oleh GN⁺ 2024-10-29 | 1 komentar | Bagikan ke WhatsApp

Rendahnya pemanfaatan validasi form HTML

  • Form HTML memiliki mekanisme validasi yang kuat, tetapi jarang digunakan. Banyak orang tidak terlalu mengetahuinya. Ini mungkin disebabkan oleh kekurangan dalam desainnya.

Atribut, metode, dan properti

  • Untuk mencegah input kosong, kita bisa menambahkan atribut required.
  • Ada tiga cara untuk menambahkan batasan pada input:
    • menggunakan nilai atribut type tertentu: "email", "number", "url"
    • menggunakan atribut input lain seperti "pattern" atau "maxlength"
    • menggunakan metode DOM setCustomValidity: cara paling kuat untuk membuat logika validasi arbitrer dan menangani kasus yang kompleks.

Nuansa API imperatif

  • API setCustomValidity hanya disediakan sebagai metode sehingga kurang nyaman digunakan.
  • Misalnya, kita bisa mengimplementasikan fungsi yang setara dengan atribut required untuk mencegah pengiriman form saat input kosong.
  • Pada render awal, jika input kosong maka harus ditandai sebagai tidak valid.

Masalah boilerplate

  • Cara memvalidasi nilai awal terasa merepotkan.
  • Logika validasi terduplikasi antara handler onChange dan tahap render awal.
  • Kombinasi useRef + useLayoutEffect + onChange terasa rumit.

Bagian yang hilang

  • Diperlukan atribut custom-validity.
  • Dalam framework deklaratif, validasi input dapat didefinisikan dengan kuat.

Kekuatan validasi asinkron

  • Dapat menangani kasus ketika input nama pengguna hanya valid jika belum digunakan.
  • Diperlukan pemanggilan asinkron ke server, serta status perantara.

Implementasi

  • Menggunakan fungsi verifyUsername untuk memeriksa keunikan nama pengguna.
  • Menggunakan useQuery untuk mengelola status permintaan ke server.
  • Menggunakan atribut customValidity untuk menjelaskan alur validasi asinkron.

Form konfirmasi kata sandi

  • Mengimplementasikan form yang mengharuskan kata sandi dimasukkan ulang.
  • Memvalidasi dengan memeriksa apakah kedua field input cocok.

Kesimpulan

  • setCustomValidity dapat memenuhi beragam kebutuhan validasi.
  • API yang kuat memberikan kemampuan yang sesungguhnya.
  • Diharapkan fitur ini ditambahkan ke spesifikasi HTML.

Ringkasan GN⁺

  • Validasi form HTML kuat, tetapi kurang dimanfaatkan. Ini mungkin disebabkan oleh kompleksitas API.
  • Metode setCustomValidity adalah alat yang kuat untuk menangani logika validasi yang kompleks.
  • Artikel ini menunjukkan cara menangani skenario rumit seperti validasi asinkron.
  • Tulisan ini memberikan informasi berguna agar para pengembang dapat memanfaatkan validasi form HTML dengan lebih baik.

Bacaan terkait

1 komentar

 
GN⁺ 2024-10-29
Komentar Hacker News

  • Browser web masih tidak memungkinkan pengubahan gaya pesan validasi HTML bawaan, dan Chrome serta Firefox tidak mengikuti pedoman UI platform OS sehingga berbenturan dengan estetika proyek

    • Chrome sebelumnya memungkinkan pengubahan gaya pesan validasi menggunakan selector pseudo-element berprafiks vendor, tetapi fitur ini telah dihapus
    • Ada keluhan tentang penggunaan HTML combobox dan <select multiple> yang tidak efisien

  • Menggunakan nilai atribut type tertentu (misalnya: "email", "number", "url") dapat memicu keyboard yang optimal di perangkat mobile sehingga sangat meningkatkan pengalaman pengguna

  • Orang-orang yang menulis spesifikasi terkesan jauh dari penggunaan nyata; cocok untuk hal-hal sederhana, tetapi untuk form yang kompleks lebih baik menulisnya sendiri

  • Ada penyesalan karena dulu mengabaikan kesederhanaan dasar form, serta ucapan terima kasih karena telah membagikan sudut pandang orang lain

  • Ada permintaan agar, ketika checkbox memiliki label, atribut "for" ditambahkan ke label sehingga klik pada label dapat mengaktifkan/menonaktifkan checkbox

  • Menyediakan contoh sederhana tanpa menggunakan React

  • Validasi form HTML sangat bagus, tetapi ada masalah besar karena tidak berfungsi di Firefox for Android

  • Banyak framework dan library menyediakan fitur validasi yang bisa di-styling, jadi tidak perlu bersusah payah

  • Perlu berhati-hati agar tidak terlalu berlebihan menggunakan validasi

    • Ada pengalaman harus memeriksa HTML karena syarat "minimal 15 kata" saat meminta refund Groupon
    • Pola validasi sama sekali tidak mengizinkan tanda baca

  • Situs yang salah menggunakan type=password untuk input 2FA membuat password manager dan browser menjadi bingung