Formik ve Yup ile React Form Validasyonu

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.

Uygulama Kodları: formik-yup-app

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