Pernahkah Anda mencoba mengirimkan formulir, hanya untuk halaman web yang memberi Anda pesan kesalahan yang memberi tahu Anda bahwa satu atau lebih bidang tidak valid? Jika demikian, maka Anda telah mengalami validasi formulir.

Validasi seringkali penting untuk mendapatkan data yang bersih dan dapat digunakan. Dari alamat email hingga tanggal, jika perlu akurat, Anda perlu memeriksanya dengan cermat.

Apa itu Validasi Formulir?

Validasi formulir adalah proses memastikan bahwa data yang dimasukkan ke dalam formulir oleh pengguna adalah benar dan lengkap. Anda dapat melakukannya di sisi klien, menggunakan fitur HTML bawaan seperti atribut yang diperlukan. Anda juga bisa memvalidasi pada klien menggunakan JavaScript, dan ada pustaka Next.js eksternal untuk membantu memudahkan prosesnya.

Ada beberapa alasan mengapa validasi formulir sangat penting. Pertama, ada baiknya memastikan bahwa data yang dimasukkan ke dalam formulir sudah lengkap dan benar. Ini penting karena membantu mencegah kesalahan saat aplikasi Anda mengirimkan data ke server atau database.

instagram viewer

Kedua, validasi formulir dapat membantu meningkatkan kegunaan formulir dengan memberikan umpan balik saat pengguna memasukkan data yang tidak valid. Ini dapat membantu menghindari frustrasi dan kebingungan di pihak pengguna.

Terakhir, validasi formulir dapat membantu meningkatkan keamanan formulir dengan memastikan formulir hanya mengirimkan data yang valid.

Cara Memvalidasi Formulir di Next.js

Ada dua cara untuk memvalidasi formulir di Next.js: menggunakan metode bawaan atau menggunakan pustaka eksternal.

Menggunakan Metode Bawaan

HTML menyediakan beberapa metode untuk memvalidasi formulir, yang paling umum adalah diperlukan atribut. Ini memastikan bahwa bidang tidak boleh kosong. Anda dapat menggunakan metode ini dari aplikasi Next.js, cukup dengan menyertakan atribut dalam tag masukan yang Anda hasilkan. HTML juga menyediakan a pola atribut. Anda dapat menggunakan ini bersama dengan a ekspresi reguler untuk validasi yang lebih kompleks.

Contoh ini menyertakan formulir dengan dua bidang: nama dan email. Kolom nama wajib diisi, dan kolom email harus cocok dengan ekspresi reguler.

impor Reaksi dari 'reaksi'
kelasFormulir SayamemanjangReaksi.Komponen{
 render() {
kembali (
<membentuk >
<label>
 Nama:
<jenis masukan="teks" nama="nama" diperlukan />
</label>
<label>
 Surel:
<jenis masukan="surel" nama="surel"
 pola="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<jenis masukan="kirim" nilai="Kirim" />
</form>
 )
 }
}
eksporbawaan Formulir Saya

Kode ini mengimpor pustaka React, lalu membuat kelas bernama MyForm dan merender elemen formulir. Di dalam elemen form, ada dua elemen label.

Elemen label pertama berisi kolom input teks yang diperlukan. Elemen label kedua berisi bidang masukan email dengan ekspresi reguler dalam atribut polanya.

Akhirnya, Anda memiliki tombol kirim. Saat pengguna mengirimkan formulir, atribut wajib memastikan bahwa mereka mengisi kolom nama. Atribut pola bidang email memastikan email dalam format yang ditentukan. Jika salah satu dari kondisi ini gagal, formulir tidak akan dikirim.

Ada beberapa kerugian menggunakan metode bawaan. Pertama, mungkin sulit untuk melacak semua aturan validasi berbeda yang telah Anda siapkan. Kedua, jika Anda memiliki banyak bidang, akan membosankan untuk menambahkan atribut yang diperlukan ke masing-masing bidang. Terakhir, metode bawaan hanya menyediakan validasi dasar. Jika Anda ingin melakukan validasi yang lebih kompleks, Anda perlu menggunakan perpustakaan eksternal.

Menggunakan Perpustakaan Eksternal

Selain metode bawaan, ada juga banyak pustaka eksternal yang bisa Anda gunakan untuk memvalidasi formulir. Beberapa perpustakaan populer termasuk Formik, react-hook-form, dan Yup.

Untuk menggunakan perpustakaan eksternal, Anda harus menginstalnya terlebih dahulu. Misalnya, untuk menginstal Formik, jalankan perintah berikut:

npm Install formik

Setelah Anda menginstal pustaka, Anda dapat mengimpornya ke dalam komponen Anda dan menggunakannya untuk memvalidasi formulir Anda:

impor Reaksi dari 'reaksi'
impor { Formik, Formulir, Bidang } dari 'formik'
const Bentukku = () => (
<Formik
 nilai awal={{ nama: '', surel: '' }}
 validasi={nilai => {
const kesalahan = {}
jika (!nilai-nilai.nama) {
 kesalahan.nama = 'Diperlukan'
 }
jika (!nilai-nilai.surel) {
 error.email = 'Diperlukan'
 } kalau tidakjika (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.tes (nilai.email)
 ) {
 error.email = 'alamat email salah'
 }
kembali kesalahan
 }}
 onSubmit={(nilai, { setSubmitting }) => {
 setTimeout(() => {
 peringatan(JSON.stringifikasi (nilai, batal, 2))
 setMengirim(PALSU)
 }, 400)
 }}
>
 {({ Mengirimkan }) => (
<Membentuk>
<Jenis bidang="teks" nama="nama" />
<Jenis bidang="surel" nama="surel" />
<jenis tombol ="kirim" dinonaktifkan={Mengirimkan}>
 Kirim
</button>
</Form>
 )}
</Formik>
)
eksporbawaan Formulir Saya

Di sini, Anda pertama kali mengimpor file Formik, Membentuk, Dan Bidang komponen dari perpustakaan Formik. Selanjutnya, buat komponen bernama MyForm. Komponen ini merender formulir yang memiliki dua bidang: nama dan email.

Prop initialValues ​​menetapkan nilai awal bidang formulir. Dalam hal ini, bidang nama dan email keduanya adalah string kosong.

Prop validasi menetapkan aturan validasi untuk bidang formulir. Dalam hal ini, bidang nama wajib diisi, dan bidang email harus cocok dengan ekspresi reguler.

Prop onSubmit menyetel fungsi yang akan dipanggil React saat pengguna mengirimkan formulir. Dalam hal ini, fungsinya adalah peringatan yang akan menampilkan nilai bidang formulir.

Prop isSubmitting menentukan apakah formulir sedang dikirim. Dalam hal ini, Anda menyetelnya ke false.

Terakhir, render form menggunakan komponen Form dari Formik.

Manfaat Menggunakan Perpustakaan Eksternal di Next.js

Ada beberapa manfaat menggunakan pustaka eksternal seperti Formik untuk memvalidasi formulir di Next.js. Salah satu manfaatnya adalah lebih mudah untuk menampilkan pesan kesalahan kepada pengguna. Misalnya, jika kolom yang wajib diisi tidak diisi, Formik akan secara otomatis menampilkan pesan error termasuk perbaikan yang disarankan.

Manfaat lainnya adalah Formik dapat menangani aturan validasi yang lebih kompleks. Misalnya, Anda dapat menggunakan Formik untuk memvalidasi dua bidang yang sama (seperti kata sandi dan bidang konfirmasi kata sandi).

Terakhir, Formik memudahkan pengiriman data formulir ke server. Misalnya, Anda bisa menggunakan Formik untuk mengirimkan data formulir ke API.

Tingkatkan Keterlibatan Pengguna Menggunakan Formulir

Anda dapat menggunakan formulir untuk meningkatkan keterlibatan pengguna. Dengan memberikan umpan balik saat pengguna memasukkan data yang tidak valid, Anda dapat membantu menghindari frustrasi dan kebingungan.

Menggunakan pustaka eksternal, Anda dapat menambahkan fitur seperti pelengkapan otomatis dan bidang bersyarat. Ini dapat membantu membuat formulir Anda lebih ramah pengguna. Jika digunakan dengan benar, formulir dapat menjadi alat yang ampuh untuk membantu Anda meningkatkan keterlibatan pengguna dan mengumpulkan data yang Anda perlukan.

Selain validasi, Next.js memiliki banyak fitur yang dapat Anda gunakan untuk meningkatkan keterlibatan pengguna.