Formik İle Doğrulama ve Validasyon Nasıl Yapılır?

Adı : Formik İle Doğrulama ve Validasyon Nasıl Yapılır?

Form işlemlerinde doğrulama ve validasyon oldukça önemlidir. Doğru yapılmayan doğrulama ve validasyon işlemleri, kullanıcıların veri girişi sırasında hatalar yapmasına neden olabilir. Bu da sonuç olarak kullanıcı deneyimini olumsuz etkileyebilir. Formik, bu doğrulama ve validasyon işlemlerini daha kolay ve hızlı hale getirebilen bir kütüphanedir. Bu yazıda Formik ile doğrulama ve validasyon işlemlerinin nasıl yapılabileceğini inceleyeceğiz.

Formik Nedir?

Formik, React uygulamalarına özelleştirilmiş form yönetimi için tasarlanmış açık kaynak bir kütüphanedir. Form içindeki verileri otomatik olarak yönetir ve veri değişimlerini izler. En önemli özelliği, kullanıcı girdilerinin doğrulanması ve validasyonun kolay hale getirilmesidir.

Formik ile Doğrulama ve Validasyon Yapmak

1. Doğrulama Şeması Tanımlama

Öncelikle, formun parametreleri doğrulanırken kullanılacak bir doğrulama şeması tanımlamalıyız. Yani, hangi alanların zorunlu olacağı, hangi alanların hangi türde veri alacağı gibi şeyler tanımlanmalıdır. Doğrulama şeması, YUP denilen bir validasyon şeması ile belirtilir. Örneğin, aşağıdaki şema, bir kullanıcının adını, soyadını ve e-posta adresini girmesi gerektiğini belirtir.

```
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
firstName: Yup.string()
.required('Bu alan zorunludur'),
lastName: Yup.string()
.required('Bu alan zorunludur'),
email: Yup.string()
.email('Geçerli bir e-posta adresi girin')
.required('Bu alan zorunludur'),
});
```

2. Formik İle Form Oluşturma

Doğrulama şemasını tanımladıktan sonra, form oluşturmak için Formik kullanabiliriz. Formik, form verilerinin doğru şekilde alınması ve yüklenmesi için gereken tüm yönetim işlemlerini yapar. Formu oluşturmak için Formik'in `` bileşenini kullanırız. Ayrıca, `` bileşeninin içine formun alanlarını oluşturmak için `` bileşenlerini kullanırız.

Örneğin, aşağıdaki kod, ad, soyad ve e-posta adresi alanlarından oluşan bir form oluşturur.

```
import { Formik, Form, Field, ErrorMessage } from 'formik';

function UserForm() {
return (
initialValues={{ firstName: '', lastName: '', email: '' }}
validationSchema={validationSchema}
onSubmit={(values, { setSubmitting }) => {
console.log(values);
}}
>
{({ isSubmitting }) => (

Adınız:

Soyadınız:

E-posta:

Gönder

)}

);
}

export default UserForm;
```

3. Alan Validasyonu Göstermek

Formik ile alanların doğruluğunu göstermek istediğimizde, `` bileşenini kullanabiliriz. Bu bileşen, alanın doğruluğunu gösteren bir hata mesajı görüntüler ve alanın yanına yerleştirilir. Ayrıca, hata mesajlarının stili de özelleştirilebilir.

4. Form Gönderimi

Son olarak, formun gönderimini ayarlamalıyız. Bu işlemi Formik'in `` bileşenindeki `onSubmit` özelliği ile yapabiliriz. Bu özellik, başarılı bir şekilde form gönderildiğinde çalışan bir `onSubmit` fonksiyonu belirtir. Aşağıdaki örnekte, gönderilen veriler konsolda yazdırılır.

```
onSubmit={(values, { setSubmitting }) => {
console.log(values);
}}
```

Sık Sorulan Sorular

1. Formik ile doğrulama ve validasyon işlemleri neden önemlidir?

Doğrulama ve validasyon işlemleri, kullanıcıların veri girişlerinin doğru ve güvenilir olmasını sağlar. Bu da sonuç olarak, uygulamanın verilerinin doğru ve güvenilir olmasını sağlar.

2. Formik, hangi validasyon şemasını kullanır?

Formik, YUP denilen bir validasyon şemasını kullanır.

3. Formik ile alan validasyonu nasıl yapılır?

Formik ile alan validasyonu, `` bileşenine alanın doğru olup olmadığını gösteren bir hata mesajı yerleştirilerek yapılır.

4. Form gönderimi için Formik kullanırken nelere dikkat edilmelidir?

Form gönderimi için, Formik'in `` bileşenindeki `onSubmit` özelliği kullanılmalıdır. Bu özellik, gönderim işlemi başarılı olduğunda çağrılacak fonksiyonu belirtir."