Formik ve Yup ile React için Formlar ve Validasyon Üzerine

Bu yazıda React için validasyon işlemlerinde yaygın olarak kullanılan iki paketten ve farklı kullanım durumlarından bahsetmeye çalışacağım. Önce paketlerimizi kısa açıklamalar ile tanıyalım.

Formik: https://github.com/jaredpalmer/formik

• Formik açık kaynak geliştirilmekte olan React içerisinde formlar oluşturup bu formların validasyon ve submit gibi işlevlerini efektif şekilde geliştirebileceğiniz bir paket.
• Formik functional component için custom hook desteği sunuyor ki bu yazıda vereceğim örneklerde hook kullanacağım.
• Formik validasyon konusunda Yup ile entegre şekilde çalışabiliyor. Oluşturduğunuz bir form için yup schemasını verdiğiniz durumda tüm validasyon durumlarını kendi sunduğu parametreler üzerinden takip edebiliyorsunuz.
• Form elementlerinin name değerleri üzerinden nested desteği de olacak şekilde çalışabiliyor.
• React Native desteği var ama bunu incelemedim olur da bir uygulama üzerinden deneme fırsatı bulursam yazıyı güncelleyeceğim.

Yup: https://github.com/jquense/yup

• Yup github sayfasında belirttiği üzere en özet haliyle Dead simple Object schema validation
• Yup js schema based bir validasyon kütüphanesi. Schema based olmasının güzel yanı validasyon uygulamak istediğiniz objeyi bir obje üzerinden tanımlayıp sonrasında istediğiniz fieldlar için sync ya da async şekilde validasyona sokabiliyorsunuz.
• Hata mesajları için localization ayarlayabilmek mümkün.
• Mevcut sunulan validasyon fonksiyonlarının yanına ek olarak custom validasyon fonksiyonları eklemek oldukça kolay.

Aşağıda örnek kodları ve codesandbox üzerinde kodları deneyebileceğiniz örnek bir sandbox linkini paylaşacağım.

• İlk olarak useFormik hookunu formik içerisinden destructuring ile import ettik.
• Oluşturacağımız basit login formumuza küçük css eklemeleri yapmak adına styled-components i import ettik. Kullanımı oldukça basit ve işlevsel bir araç daha detaylı bilgiyi sitesinde bulabilirsiniz https://styled-components.com/.
• Sonrasında yup u import * as yup from 'yup' şeklinde dahil ettik. * as yup dememizin amacı yup paketi altındaki tüm export edilen fonksiyonları yup değişkenine aktarmak. import { string, email, ... } from 'yup' şeklinde de kullanabilirsiniz.
• useFormik hookunu alacağı 3 parametre ile birlikte çağırdık. İlki initialValues parametresi burada formun alacağı tüm değerleri schema halinde yazdık. Formda inputların almasını istediğiniz default değerleri burada belirtebilirsiniz. Burada initialValues için gerektiği durumlarda nested şekilde schemalar yazabilirsiniz formik bunu destekliyor.
• İkinci parametre olarak yukarıda tanımladığımız validationSchema yı verdik. Bu initialValues üzerinde belirttiğimiz parametrelerin valide olup olmadığını kontrol edecek olan schema.
• Ve üçüncü olarak onSubmit fonksiyonunu verdik. Burası form valide olduğu durumda çalışacak. validationSchema vermediğiniz durumda submit her tetiklendiği durum için çalışır.
• Bu hooktan dönen değeri formik adında bi değişkene aktardık. formik değişkeni içerisinde form değerleri ve validasyon değerleri gibi birçok şeye ulaşabiliyoruz.
• Örneğin formik.values ile form üzerinde tanımlanan tüm değerlere ulaşabilirsiniz.
• formik.handleChange fonksiyonunu form elemanlarına verdiğiniz durumda name alanına o inputun hangi form değerine karşılık geleceğini yazarsanız onChange ya da onInput gibi değişim durumlarında formik.values üzerindeki değer güncellenir.
• formik.errors üzerinden form hata mesajlarına ulaşabilirsiniz.
• formik.isSubmitting formun submit edilip edilmediğini döner. Bir form submit edildiyse bu değer true halini alır eğer false haline çekmek istiyorsanız onSubmit fonksiyonunun ikinci parametresi üzerinden çağırıp false yapabilirsiniz. (Bu şekilde çağırabilirsiniz: { setSubmitting })
• formik.isValid üzerinden formun valid olup olmadığına true/false erişebilirsiniz.

github gist üzerinden paylaştığım örnek kodlar;

codesandbox üzerinden de deneyebilirsiniz;