Formik ve Yup ile React Form Validasyonu
Tags: react, javascript, webdev, formik
Published: 2022-08-21 12:40:32

Bir çoğumuz projelerimizde ve gündelik çalışmalarımızda formlar ile çalıştık ve çalışıyoruz. Peki oluşturduğumuz bu form yapılarımıza valisdasyonlarımızı yani doğrulamalarımızı koyuyor muyuz ? 

İstemci tarafı form doğrulamasını yerleştirmeliyiz. Bunun nedeni, kullanıcı deneyimini ve web sitesi performansını iyileştirmesi ve arka uç sunucusuna geçersiz veri gönderilmesini engeller.

Bu yazıda React'a Formik ve Yup kullanarak **email , şifre ve şifre kontrol** alanlarına nasıl doğrulama ekleyeceğimizi anlatacağım.


**Adım 1 :** Yeni bir React projesi oluşturalım.

```
npx create-react-app form-validation
```

**Adım 2 :** Ardından uygulamaya formik kütüphanesini kuralım

```
cd form-validation
npm install formik --save
```
**Adım 3 :** Ardından uygulamamıza Yup'u dahil edelim

```
npm install yup --save
```
**Adım 4 :** Uygulama klasörlerimiz içerisinde **components** isimli bir klasör daha açalım ve bunun içerisine **Signup.js** isimli dosya oluşturalım. Daha sonra **validations.js** isimli bir dosya daha oluşturalım burada form'umuz için gerekli olan validasyonları tanımlayıp  **Signup.js** sayfamızda import edeceğiz.

**Adım 5 :** Signup.js dosyamızda gerekli importları yapalım.

```
import React from "react";
import { useFormik } from "formik";
import validationSchema from "./validations";
```

**Adım 6 :** Daha sonra useFormik ile initialValues , handleSubmit,validationSchema özelliklerini ekleyin.

```
const { handleChange, handleSubmit, values, handleBlur, errors, touched } =
    useFormik({
      initialValues: {
        email: "",
        password: "",
        passwordConfirm: "",
      },
      onSubmit: (values) => {
        console.log(values);
      },
      validationSchema,
    });
```

Burada gördüğümüz : 

- **handleChange:** form yapısında inputlar içerisindeki değişimleri yakalamak için.

- **handleSubmit:** form submit olduğunda kullanacağımız özellik.

- **values:** Form inputlarında girilen değerleri yakalamak için kullandığımız özellik

- **handleBlur:** İnputa tıklandı ve daha sonra tıklanan inputtan çıktığınız an çalışan özellik.

- **errors:** Yup'un formikle uyumlu çalıştığını gösteren özellik ismindende anlaşılacağı gibi inputlardaki error mesajları için kullanılır.
- **touched:** İnputa daha önce touch olmuşmu yani focus yapılmışmı.

validations.js import ettiğimiz isimi fark ettiyseniz useFormik içerisinde kullandığımız **_validationSchema_** ile aynı bunun nedeni eğer farklı bir isimle(validations) import etseydik useFormik içerisinde **_validationSchema=validations_** şeklinde kullanmamız gerekecekti.

Daha kolay ve pratik olması için ben böyle bir kullanıma gittim bu sizin tercihinize göre değişebilir.


**Adım 7 :** validations.js dosyamızda artık gerekli kontrolleri yazabiliriz.

```
const validations = yup.object().shape({
  email: yup
    .string()
    .email("Geçerli Bir Email Giriniz !!")
    .required("Zorunlu Alan"), 
  password: yup.string().min(5, "En az 5 karakter giriniz !!").required(),
  passwordConfirm: yup
    .string()
    .oneOf([yup.ref("password")])
    .required(),
});
```

Burada **email** için strgin olduğunu ve geçerli bir email olup olmadığının kontrolü için yup'un email() fonk. kullanıyoruz ve son olarak zorunlu alan olduğu içinde required() kullanıyoruz.

Aynı şekilde password ve passwordConfirm için string olduğunu passwordun minimum 5 karakter olacağını ve passwordConfirm'ün password ile aynı olup olmadığını anlamak içinde oneOf() özelliği içinde password'u referans veriyoruz.


Burada parantez içerisinde yazdığım türkçe uyarılar ise yup'un bize sağladığı default errorlar haricinde kendi görmek istediğiniz errorları oluşturmanız için kullanılan alan olarak düşünebilirz.

**Adım 8 :** Son olarak form yapımızı oluşturalım ve inputların her birine onChange eklemeyi unutmayalım.

```
<form onSubmit={handleSubmit}>
        <label>Email</label>
        <input
          name="email"
          value={values.email}
          onChange={handleChange}
          onBlur={handleBlur}
        />
        {errors.email && touched.email && (
          <div className="errors">{errors.email}</div>
        )}
        <br />
        <br />
        <label>Password</label>
        <input
          name="password"
          value={values.password}
          onChange={handleChange}
          onBlur={handleBlur}
        />
        {errors.password && touched.password && (
          <div className="errors">{errors.password}</div>
        )}

        <br />
        <br />
        <label>Password Confirm</label>
        <input
          name="passwordConfirm"
          value={values.passwordConfirm}
          onChange={handleChange}
          onBlur={handleBlur}
        />
        {errors.passwordConfirm && touched.passwordConfirm && (
          <div className="errors">{errors.passwordConfirm}</div>
        )}

        <br />
        <br />
        <button type="submit">Submit</button>
      </form>
```

Uygulamamızda errorlar şu şekilde gözükecektir.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2cqhp9e5frdybkskbug.PNG)


**Uygulama Kodları:** [formik-yup-app](https://github.com/berkanyldrim/react-apps/tree/main/formik)

Vaktinizi ayırıp yazımı okuduğunuz için teşekkür ederim. Daha fazla bilgi için iletişime geçebilirsiniz.