Begin typing your search above and press return to search.
Son Eklenenler
05 Nisan 2025,
  1. Ana Sayfa
  2. Formik ile React'ta Validasyon Nedir?

Formik ile React'ta Validasyon Nedir?

Formik ile React'ta Validasyon Nedir?

Formik, React uygulamalarında form validasyon işlemlerini kolaylaştıran bir kütüphanedir Form validasyonu, kullanıcının girdiği verileri belirli bir formata veya koşula göre kontrol etmek anlamına gelir Bu sayede, kullanıcının hatalı veri girişi yapmasının önüne geçilir ve uygulama daha güvenli hale gelir Formik, form validasyon işlemlerini React bileşenleri içinde yapılandırmayı ve kod tekrarını önleyerek uygulamanın bakımını kolaylaştırmayı sağlar Bu makalede, Formik kullanarak React uygulamalarında validasyon yapmanın temelleri, form validasyonu türleri ve mesajları öğreneceksiniz Aynı zamanda, Formik'in hatalarını tanımayı ve nasıl çözüleceğini öğreneceksiniz Uygulamanızın güvenliği ve sağlamlığına katkı sağlayacak önemli bir özellik olan form validasyonunu öğrenerek, kullanıcıların hatalı veri girişlerine karşı korunmasını

Formik ile React'ta Validasyon Nedir?

Formik, React uygulamalarında form validasyon işlemlerini kolaylaştıran bir kütüphanedir. Form validasyonu, kullanıcının girdiği verileri belirli bir formata veya koşula göre kontrol etmek anlamına gelir. Bu sayede, kullanıcının hatalı veri girişi yapmasının önüne geçilir ve uygulama daha güvenli hale gelir. Formik, form validasyon işlemlerini React bileşenleri içinde yapılandırılmasını kolaylaştırır ve kod tekrarını önleyerek uygulamanın bakımını kolaylaştırır.

Bu makalede, Formik kullanarak React uygulamalarında validasyon yapmanın temellerini, form validasyonu türlerini ve mesajlarını özelleştirmeyi öğreneceksiniz. Aynı zamanda, Formik'in hatalarını tanımayı ve nasıl çözüleceğini öğreneceksiniz. Böylece, uygulamanızın güvenliği ve sağlamlığına katkı sağlayacak önemli bir özelliği öğrenmiş olacaksınız.


Formik ile React Formlarının Temeli

Formik, React uygulamalarında form işlemlerini oldukça kolaylaştırır. Formik kullanarak temel bir form oluşturmak ise oldukça basittir. İlk olarak, Formik kütüphanesini projenize dahil etmeniz gerekiyor. Bunun için şu komutu kullanmanız yeterlidir: 

npm install formik

Daha sonra, formunuzda kullanacağınız input alanlarını oluşturmanız gerekiyor. İnput alanlarına isimlerini ve değerlerini verdiğinizde, Formik bu alanları otomatik olarak takip etmeye başlayacaktır. Örneğin, bir e-posta adresi alanı oluşturmak için şu kodu kullanabilirsiniz:

{
      "name": "email",
      "type": "email",
      "value": values.email
    >}

Bu kodda, "name" özelliği input alanının ismini belirtirken, "type" özelliği input alanının türünü belirtir. "value" özelliği ise input alanının varsayılan değerini belirtir.

Ardından, Formik'in sağladığı 

{
}
bileşenini kullanarak formunuzu oluşturabilirsiniz. Bu bileşen, Formik'in tüm özelliklerini kullanmanıza olanak sağlayan bir bileşendir. Örneğin, aşağıdaki gibi bir form oluşturabilirsiniz:

{
      <Formik
       initialValues={{
        email: "",
        password: ""
       }}
       onSubmit={handleSubmit}
      >
          {props => (
              <form onSubmit={props.handleSubmit}>
               <label htmlFor="email">Email:</label>
               <input
                type="email"
                id="email"
                name="email"
                onChange={props.handleChange}
                value={props.values.email}
                />
               <label htmlFor="password">Password:</label>
               <input
                type="password"
                id="password"
                name="password"
                onChange={props.handleChange}
                value={props.values.password}
                />
               <button type="submit">Submit</button>
              </form>
          )}
      </Formik>
    >}

Bu kodda, "initialValues" özelliği formun varsayılan değerlerini belirtirken, "onSubmit" özelliği formun gönderildiğinde nasıl bir işlem yapılacağını belirtir. Buna ek olarak, input alanlarına "name" özelliği vermeniz Formik'in input alanlarını takip etmesini sağlar. 

{}
bileşeninin içerisinde yer alan props ise formun kalan kısmını oluşturur.

Bu şekilde, Formik kullanarak React uygulamalarınızda form oluşturmak oldukça kolaylaşacaktır.


Form Validasyonu Yapmak

Formik, React uygulamalarında form işlemlerini kolaylaştıran bir kütüphanedir ve form validasyonu gibi önemli işlemleri kolaylıkla yapmanızı sağlar. Form validasyonu, kullanıcının girdiği verilerin belirli bir formata uygun olup olmadığını kontrol etmek ve hatalı girişleri önlemek için kullanılır. Bu bölümde Formik kullanarak form validasyonu nasıl yapabileceğinizi öğreneceksiniz.

Form validasyonu yapmak için öncelikle, formunuzun doğru yapıda olması gerekir ve gerekli alanlar name özelliği ile tanımlanmalıdır. Böylece Formik, gerekli alanları takip edebilir ve doğru bir şekilde validasyon işlemini gerçekleştirebilir.

Form validasyonunu gerçekleştirmek için Formik'te Formik komponentinin içinde yer alan validate özelliğini kullanabilirsiniz. Bu özellik, form validasyonunu gerçekleştirmek için bir fonksiyon alır. Bu fonksiyonun amacı, form girdilerinin doğru bir şekilde girilip girilmediğini kontrol etmektir.

Formik, bu fonksiyonu otomatik olarak çağırır ve form validasyonunu gerçekleştirir. Ayrıca, herhangi bir hata olması durumunda da kullanıcıya uygun bir hata mesajı gösterilir.

Örnek olarak, bir kullanıcının sadece yıl, ay ve gün gibi belirli bir formatta tarih girmesi gerektiğini düşünelim. Bu durumda, validate özelliği ile bir fonksiyon oluşturarak, tarih girdilerinin doğru formatta girilip girilmediğini kontrol edebilirsiniz. Eğer girdiler doğru formatta değilse, Formik kullanıcılara uygun bir hata mesajı gösterir.

Bu şekilde, Formik kullanarak form validasyonunu gerçekleştirmek oldukça kolaydır ve hatalı girişlerin önlenmesine yardımcı olur.


Yapısal Validasyon

Formik, React uygulamalarında form validasyonunu kolaylaştırmak için kullanılan bir kütüphanedir. Yapısal validasyon, verilerin şekline dayalı bir validasyon türüdür ve örneğin bir e-posta adresinin doğru formatta girilip girilmediğini kontrol etmek gibi birçok senaryoda kullanılabilir. Formik ile yapısal validasyon yapmak oldukça kolaydır.

Formik'in sağladığı <Field /> özellikleri sayesinde yapısak validasyon hızlı ve kolay bir şekilde yapılabilir. Örneğin, bir kullanıcının e-posta adresini girmesi gereken bir formunuz varsa ve bunun doğru formatta girildiğinden emin olmak istiyorsanız, aşağıdaki şekilde Formik'i kullanarak yapısak validasyon yapabilirsiniz:

İşlemler
  • Formik kullanarak <Formik /> bileşeni oluşturun.
  • <Field /> özelliği kullanarak e-posta giriş alanını oluşturun.
  • Formik'in sağladığı props kullanarak, gerekli olan yapısak validasyonu tanımlayın.
  • Formik'in sağladığı handleSubmit fonksiyonunu kullanarak, formu gönderme işlemini gerçekleştirin.

Bu adımları izledikten sonra, Formik yapısak validasyon işlemini hızlı ve kolay bir şekilde gerçekleştirecektir. Yapısak validasyon işleminin ne kadar kolay olduğunu görerek, Formik kullanarak form validasyon işlemlerini hiç olmadığı kadar kolay hale getirebilirsiniz.


Email Validasyonu

Email validasyonu, kullanıcının girdiği e-posta adresinin doğru formatta olup olmadığını kontrol etmek için kullanılan bir yöntemdir. Bu işlemi yapmak için Formik kullanarak kolayca email validasyonu yapabilirsiniz. İlk olarak, Formik'i yüklemek için npm veya yarn paket yöneticisini kullanarak Formik'i projenize ekleyin. Bunu yaptıktan sonra, email alanına yerleştireceğiniz input etiketine validationSchema prop'unu ekleyin ve email için Yup kütüphanesinden bir schema oluşturun.

  // Form alanı  <Formik    initialValues={email: ''}    validationSchema={      email: Yup.string()        .email('Geçerli bir e-posta adresi girin')        .required('E-posta alanı boş bırakılamaz')    }    onSubmit={onSubmit}  >    {({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (      <form onSubmit={handleSubmit}>        <label htmlFor="email">E-posta</label>        <input          type="email"          id="email"          name="email"          onChange={handleChange}          onBlur={handleBlur}          value={values.email}          className={touched.email && errors.email ? "invalid" : ""}        />        {touched.email && errors.email ? (          <div className="error-message">{errors.email}</div>        ) : null}        <button type="submit">Gönder</button>      </form>    )}  </Formik>

Bu kodda, email alanı için validationSchema prop'u ile Yup kütüphanesinden bir schema oluşturduk ve input etiketine type özelliğini "email" olarak ekledik. Bunun nedeni, input'un sadece e-posta formatında veri almasını istememizdir. Aynı zamanda, eğer email alanı boş bırakılırsa kullanıcıya ilgili hatanın gösterilmesi için required metodu da kullandık.

Ayrıca, input etiketinin className özelliği, email alanında hata varsa "invalid" olarak tanımlanarak CSS tarafında özelleştirmeler yapmamızı sağlar. Son olarak, hata mesajı göstermek için bir div oluşturduk ve touched.email ve errors.email değerlerinin doğrulandığında ilgili hatanın mesajını gösterdik. Bu şekilde, email validasyonu işlemini tamamlamış olduk.


Parola Validasyonu

Parola validasyonu, kullanıcının belirlenen kurallara uygun bir parola girdiğini kontrol etmek için kullanılır. Formik kullanarak parolaları doğru formatta girip girmediğini kontrol etmek kolaydır.

Örneğin, kullanıcının belirlenen en az karakter sayısı, büyük/küçük harf veya özel karakter kullanımı gibi kurallara uyması gereken bir parola belirleyebilirsiniz. Bu kurallar, Formik alanının **validate** prop'uyla ayarlanabilir.

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

function ParolaFormu() { return (

{ const errors = {}; if (!values.parola) { errors.parola = 'Parola gereklidir'; } else if (values.parola.length < 8) { errors.parola = 'Parola en az 8 karakter olmalıdır'; } return errors; }} onSubmit={(values, { setSubmitting }) => { setTimeout(() => { alert(JSON.stringify(values, null, 2)); setSubmitting(false); }, 400); }} > {({ isSubmitting }) => (
)}
);}

export default ParolaFormu;```

Yukarıdaki örnekte, **validate** prop'u, kullanıcının girdiği parolayı belirli kurallara göre doğrulamak için kullanılmıştır. Eğer parola girilmemişse, **Parola gereklidir** mesajı gösterilir. Parolaın en az 8 karakter olması gerektiği belirtilmiştir, bu kurala uymayan girdilerde **Parola en az 8 karakter olmalıdır** mesajı görüntülenir.

Formik ile parola validasyonu yapmak için **** elementi **type="password"** olarak ayarlanmalıdır. Bu, girdi alanındaki karakterlerin yıldızlarla (*) gösterilmesi sağlanır. Ayrıca, hata mesajları **** elementiyle görüntülenebilir.

Parola belirleme sırasında dikkate alınması gereken diğer güvenlik faktörleri arasında parolaları saklama, parolaları yenileme sıklığı ve parola kısıtlamaları yer alır.


İçerik Validasyonu

İçerik validasyonu, verilerin belirli bir değere veya aralığa uygun olup olmadığını kontrol etmek için kullanılır. Örneğin, kullanıcının yaşını girerken belirli bir aralıkta bir değer girmesi gerekebilir.

Formik, içerik validasyonu için basit bir yöntem sağlar. Bunun için, Yup şemasını kullanarak verilerin belirli bir formata uygunluğunu kontrol edebilirsiniz. Yup, form validasyonu için popüler bir kütüphanedir ve Formik ile birlikte kullanılabilir.

Örneğin, bir kelime sayısı sınırı olan bir metin kutusu için içerik validasyonu yapmak için aşağıdaki kodu kullanabilirsiniz:

Alan Adı Şema
Yorum Yap {formik.errors.comment && formik.touched.comment &&
{formik.errors.comment}
}