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.
Top comments (0)