Form validation (validasi formulir) adalah proses memastikan data yang dimasukkan pengguna ke dalam form sesuai dengan aturan tertentu, seperti wajib diisi, format email yang benar, atau panjang karakter minimum. Di React, kamu bisa ngecek dan validasi isi form sendiri secara manual, atau pakai bantuan library biar prosesnya jadi lebih gampang dan praktis.
Dalam tutorial ini, kita akan membahas cara membuat validasi form di React dengan pendekatan sederhana terlebih dahulu, lalu dilanjutkan dengan penggunaan library populer seperti react-hook-form dan Yup.
Mengapa Form Validation Penting?
Form validation sangat penting untuk meningkatkan kualitas data yang masuk ke sistem dan memberikan feedback langsung kepada pengguna jika ada kesalahan pengisian. Tanpa validasi, pengguna bisa saja memasukkan data kosong atau format yang salah, yang nantinya menyulitkan pemrosesan data lebih lanjut.
Baca juga: Sertifikasi Web Developer
Persiapan Sebelum Memulai
Sebelum masuk ke tahap coding, pastikan kamu sudah memiliki project React yang siap dijalankan. Kamu bisa membuat project baru dengan perintah:
npx create-react-app form-validation-demo
cd form-validation-demo
Membuat Form Validation Manual di React
Sebelum menggunakan library, mari kita pahami dulu bagaimana validasi bekerja secara manual di React.
1. Membuat Form Sederhana
Pada tahap ini, kita akan membuat form kontak sederhana dengan dua field: nama dan email. Untuk ngatur perubahan nilai dan ngecek ada error atau nggak, kita bisa pakai useState buat nyimpen dan update datanya.Form ini akan menampilkan pesan error jika data tidak sesuai, misalnya nama kosong atau email dalam format yang salah.
2. Penjelasan Kode
- Kita menyimpan data input pengguna dalam state, lalu memeriksanya saat form disubmit.
- Fungsi validasi akan mengecek apakah nama sudah diisi dan email dalam format yang valid.
- Jika ada kesalahan, pesan error akan ditampilkan di bawah input.
- Jika semua data valid, maka form dianggap berhasil dan akan menampilkan notifikasi.
Validasi Menggunakan react-hook-form dan Yup
Kalau kamu mau cara yang lebih gampang, rapi, dan bisa dipakai di banyak form, kamu bisa pakai library kayak react-hook-form buat ngatur form-nya, dan Yup buat ngecek validasinya.
1. Instalasi Library
npm install react-hook-form yup @hookform/resolvers
2. Contoh Implementasi
Pada pendekatan ini, kita menggunakan useForm dari react-hook-form untuk mengelola form dan validasi, serta Yup untuk mendefinisikan aturan validasinya. Dengan integrasi ini, kita bisa menulis validasi dengan lebih ringkas dan mengurangi logika manual.
3. Penjelasan Kode
- Kita mendefinisikan skema validasi menggunakan Yup, misalnya “nama wajib diisi” dan “email harus valid”.
- Dengan bantuan yupResolver, kita hubungkan skema ini ke form dari react-hook-form.
- Error yang terjadi akan otomatis ditampilkan pada elemen form yang sesuai tanpa perlu banyak kode tambahan.
- Pendekatan ini sangat cocok untuk form yang lebih kompleks karena lebih modular dan terstruktur.
Kesimpulan
Validasi form di React bisa dilakukan secara manual atau menggunakan library. Untuk aplikasi sederhana, validasi manual cukup memadai. Namun untuk aplikasi berskala besar dan kompleks, menggunakan library seperti react-hook-form dan Yup sangat disarankan agar lebih efisien dan mudah dalam pengelolaan.
Dengan mengikuti tutorial ini, kamu kini sudah bisa membangun form dengan validasi yang rapi dan user-friendly di React. Selamat mencoba!
Leave a Comment