Validasi Form pada Aplikasi React dengan Formik + Yup

Membuat sebuah form dan validasi input dengan mudah menggunakan Formik dan Yup

Photo by Patrick Tomasso on Unsplash

Membuat validasi form merupakan suatu tugas yang cukup melelahkan. Jika kita menggunakan “cara React” untuk membuat form beserta validasinya, maka akan cukup memakan waktu dan memusingkan. Kita harus melakukan proses dari inisiasi value state hingga form submission. Formik dapat membantu kita untuk membuat form dengan lebih sederhana. Dan disertai dengan Yup yang dapat membantu kita untuk melakukan validasi dengan lebih mudah.

Apa yang akan dibahas pada artikel ini?

1. Membuat form fields dan inisiasi value
2. Menangani user input
3. Membuat validasi dengan Yup
4. Menangani form submission

Di artikel ini, saya akan menunjukkan bagaimana membuat sebuah halaman daftar (signup) berserta validasi isiannya. Form pendaftaran tersebut akan berisi field nama, email, password, dan konfirmasi password.

1. Membuat form fields dan inisiasi value

Berikut adalah contoh kode untuk halaman daftar yang sudah saya siapkan.

Bisa kita lihat, belum ada state yang dibuat untuk menyimpan value dari isian user. Kita tidak akan menggunakan useState untuk menyimpan isian tersebut. Melainkan kita akan menggunakan Formik.

Sebelumnya, install Formik terlebih dahulu.

npm install formik --save
// atau
yarn add formik

Formik menyediakan sebuah custom hook yang dapat digunakan dan mengembalikan semua states dan fungsi pembantu yang dibutuhkan. Custom hook tersebut adalah useFormik. useFormik menerima sebuah objek yang berisi konfigurasi untuk form yang kita buat.

Kita memasukkan initialValues untuk form kita ke dalam hook useFormik. Setiap properti pada objek initialValues harus memiliki nama yang sama dengan nama pada <input />. Semua states dan fungsi pembantu yang dikembalikan oleh useFormik sekarang dapat diakses melalui variabel formik. Dengan menggunakan variabel tersebut, kita dapat memasukkan value pada komponen input dengan: value={formik.values.full_name}.

2. Menangani user input

Selanjutnya adalah menangani input dari user dan menyimpannnya ke state Formik yang telah kita buat sebelumnya. Salah satu fungsi yang disediakan oleh Formik adalah handleChange. Fungsi tersebut menerima objek event yang dikembalikan oleh onChange pada <input /> dan menggunakan nama dari field tersebut untuk menyimpan value pada tempat yang sesuai.

<input
  type="text"
  name="full_name"
  value={formik.values.full_name}
  onChange={formik.handleChange} 
/>

Kita tidak perlu untuk memasukkan nama field pada handleChange karena ia bisa mendapatkan nama field melalui event.target.name.

Menangani user input cukup mudah untuk dilakukan dengan Formik. Dengan menggunakan fungsi handleChange, kita bisa langsung meletakkannya pada onChange.

3. Membuat validasi dengan Yup

Selanjutnya adalah melakukan validasi input. Proses ini merupakan hal yang biasanya paling sulit dilakukan dibandingkan proses lainnya. Karena kita harus membuat fungsi validasi dan mengecek masing-masing input. Berkat Yup, kita dapat membuat validasi input dengan lebih mudah!

Apa itu Yup? mengutip dari halaman dokumentasi Yup: “Yup adalah sebuah pembuat skema JavaScript untuk parsing dan validasi suatu value”. Kita dapat membuat sebuah skema validasi dengan menggunakan Yup dan memasukkannya pada hook useFormik. Formik telah menyediakan sebuah option yang bernama validationSchema untuk menerima sebuah skema validasi Yup.

Sebelumnya, mari install Yup.

npm install yup --save
// atau
yarn add yup

Kemudian, kita dapat meng-import Yup dan membuat sebuah skema validasi.

Ada 2 hal yang saya lakukan pada kode di atas, yaitu membuat sebuah skema validasi dan memunculkan pesan error.

Membuat sebuah skema validasi dengan Yup

Seperti yang terlihat di atas, pembuatan skema validasi cukup sederhana. Kita dapat melakukan chaining pada fungsi-fungsi validasi yang telah disediakan oleh Yup. Contoh, kita ingin membuat field full_name untuk tidak kosong, berupa string, minimal 2 karakter dan maksimal 15 karakter. Maka kita tinggal menggunakan fungsi required, string, min, dan max. Sebuah pesan error yang sesuai juga bisa dimasukkan pada fungsi-fungsi tersebut.

Validasi yang lebih sulit yang biasanya kita temui adalah validasi terhadap email dan konfirmasi password. Yup juga telah menyediakan fungsi-fungsi yang dapat membantu kita untuk mengecek format email dan kesamaan value. Masih banyak fungsi-fungsi yang disediakan oleh Yup dan dapat dilihat pada halaman dokumentasinya.

Memunculkan pesan error

Hook useFormik juga mengembalikan state errors dan touched yang dapat digunakan untuk memunculkan pesan error.

• errors: sebuah objek yang berisi hasil validasi.
• touched: sebuah objek boolean yang menandakan bahwa suatu field telah dikunjungi atau belum.

Formik akan menjalankan validasi pada setiap keystroke yang dilakukan oleh user. Itu berarti objek errors akan berisi hasil validasi pada saat user melakukan sesuatu. Kita dapat memunculkan pesan error seperti berikut.

{formik.errors.full_name && <p>{formik.errors.full_name}</p>}

Dengan kode tersebut, pesan error akan muncul langsung pada saat user mengetik sesuatu, bukan pada saat user telah selesai dengan field atau form tersebut. Normalnya, kita ingin pesan error akan muncul pada saat user telah selesai mengisi suatu form. Untuk itu kita membutuhkan state touched.

{formik.errors.full_name && formik.touched.full_name && (
  <p>{formik.errors.full_name}</p>
)}

Dengan juga ikut mengecek state touched, sekarang kita dapat memunculkan pesan error pada saat user telah selesai melakukan pengisian form.

4. Menangani form submission

Untuk menangani form submission, kita terlebih dahulu harus memasukkan option onSubmit pada hook useFormik. Kita juga bisa mengakses values yang di-submit oleh form pada option tersebut. Kamu bisa melakukan apapun dengan values tersebut, seperti menjadikannya payload untuk API.

const formik = useFormik({
  initialValues: {
    ...
  },
  validationSchema: Yup.object({
    ...
  }),
  onSubmit: values => {
    alert(JSON.stringify(values, null, 2));  
  }
});

Fungsi pembantu lain yang disediakan oleh Formik adalah handleSubmit. Fungsi tersebut akan memanggil fungsi onSubmit yang telah kita masukkan pada useFormik jika tidak ada error yang muncul setelah melakukan validasi. Kita dapat meletakkan handleSubmit pada komponen <form>.

<form onSubmit={formik.handleSubmit}>

Berikut adalah kode lengkap untuk halaman daftar yang dibuat dengan menggunakan Formik dan Yup.

Conclusion

Dengan Formik dan Yup, kita dapat membuat validasi form dengan lebih mudah. Formik menyediakan states dan fungsi yang dibutuhkan untuk membuat suatu form. Dan Yup menyediakan set komplit untuk membuat suatu skema validasi.

Berikut adalah contoh dari apa yang sudah kita diskusikan di atas.

Terima kasih!