Form doğrulama, sağlam ve güvenli bir web uygulaması için gereklidir. Neyse ki, Formik kütüphanesi sizin için ağır işlerin çoğunu yapabilir.

Hiç bir form göndermeyi denediniz mi, sadece web sayfasının size bir veya daha fazla alanın geçersiz olduğunu söyleyen bir hata mesajı vermesi için mi? Öyleyse, form doğrulaması yaşadınız.

Doğrulama, genellikle temiz, kullanılabilir veriler elde etmek için gereklidir. E-posta adreslerinden tarihlere kadar doğru olması gerekiyorsa dikkatlice kontrol etmeniz gerekir.

Form Doğrulama Nedir?

Form doğrulama, bir kullanıcı tarafından bir forma girilen verilerin doğru ve eksiksiz olduğundan emin olma sürecidir. Bunu, gerekli öznitelik gibi yerleşik HTML özelliklerini kullanarak istemci tarafında yapabilirsiniz. JavaScript kullanarak istemcide de doğrulama yapabilirsiniz ve işlemi kolaylaştırmaya yardımcı olacak harici Next.js kitaplıkları vardır.

Form doğrulamanın gerekli olmasının birkaç nedeni vardır. İlk olarak, bir forma girilen verilerin eksiksiz ve doğru olmasını sağlamaya yardımcı olur. Bu önemlidir, çünkü uygulamanız bir sunucuya veya veritabanına veri gönderirken hataları önlemeye yardımcı olur.

İkinci olarak, form doğrulama, bir kullanıcı geçersiz veri girdiğinde geri bildirim sağlayarak formun kullanılabilirliğini geliştirmeye yardımcı olabilir. Bu, kullanıcı tarafında hayal kırıklığı ve kafa karışıklığının önlenmesine yardımcı olabilir.

Son olarak, form doğrulama, bir formun yalnızca geçerli verileri göndermesini sağlayarak güvenliğini artırmaya yardımcı olabilir.

Next.js’de Formlar Nasıl Doğrulanır?

Next.js’de formları doğrulamanın iki yolu vardır: yerleşik yöntemleri kullanmak veya harici kitaplıkları kullanmak.

Yerleşik Yöntemleri Kullanma

HTML, formları doğrulamak için en yaygın olanı gerekli öznitelik olan çeşitli yöntemler sağlar. Bu, bir alanın boş bırakılmamasını sağlar. Bu yöntemi, oluşturduğunuz giriş etiketlerine özniteliği dahil ederek Next.js uygulamanızdan kullanabilirsiniz. HTML ayrıca bir model niteliği sağlar. Bunu, daha karmaşık doğrulama için normal bir ifadeyle birlikte kullanabilirsiniz .

Bu örnek, iki alana sahip bir form içerir: ad ve e-posta. Ad alanı zorunludur ve e-posta alanı normal bir ifadeyle eşleşmelidir.

import React from ‘react’

class MyForm extends React.Component {

  render() {

    return (

     <form >

       <label>

         Name:

         <input type=”text” name=”name” required />

       </label>

       <label>

         Email:

         <input type=”email” name=”email”

          pattern=”[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$” />

       </label>

       <input type=”submit” value=”Submit” />

     </form>

   )

 }

}

export default MyForm

Bu kod, React kitaplığını içe aktarır, ardından MyForm adlı bir sınıf oluşturur ve bir form öğesi oluşturur. Form öğesinin içinde iki etiket öğesi vardır.

İlk etiket öğesi, gerekli bir metin giriş alanını içerir. İkinci etiket öğesi, model özniteliğinde düzenli bir ifadeye sahip bir e-posta giriş alanı içerir.

Son olarak, bir gönder butonunuz var. Bir kullanıcı formu gönderdiğinde, gerekli öznitelik, kullanıcının ad alanını doldurmasını sağlar. E-posta alanının kalıp özelliği, e-postanın belirtilen biçimde olmasını sağlar. Bu koşullardan herhangi biri başarısız olursa, form gönderilmeyecektir.

Ad alanı, e-posta alanı ve gönder düğmesi ile Next.js uygulaması

Yerleşik yöntemleri kullanmanın birkaç dezavantajı vardır. İlk olarak, oluşturduğunuz tüm farklı doğrulama kurallarını takip etmek zor olabilir. İkincisi, çok sayıda alanınız varsa, her birine gerekli özelliği eklemek sıkıcı olabilir. Son olarak, yerleşik yöntemler yalnızca temel doğrulama sağlar. Daha karmaşık doğrulama yapmak istiyorsanız, harici bir kitaplık kullanmanız gerekecektir.

Harici Kitaplık Kullanma

Yerleşik yöntemlere ek olarak, formları doğrulamak için kullanabileceğiniz birçok harici kitaplık da vardır. Bazı popüler kütüphaneler Formik, tepki kancası formu ve Yup’u içerir.

Harici bir kitaplığı kullanmak için önce onu yüklemeniz gerekir. Örneğin, Formik’i yüklemek için aşağıdaki komutu çalıştırın:

npm install formik

Kitaplığı yükledikten sonra, onu bileşeninize aktarabilir ve formunuzu doğrulamak için kullanabilirsiniz:

import React from ‘react’

import { Formik, Form, Field } from ‘formik’

const MyForm = () => (

  <Formik

    initialValues={{ name: ”, email: ” }}

    validate={values => {

      const errors = {}

      if (!values.name) {

        errors.name = ‘Required’

      }

      if (!values.email) {

        errors.email = ‘Required’

      } else if (

        !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,}$/i.test(values.email)

      ) {

        errors.email = ‘Invalid email address’

      }

      return errors

    }}

    onSubmit={(values, { setSubmitting }) => {

      setTimeout(() => {

        alert(JSON.stringify(values, null, 2))

        setSubmitting(false)

      }, 400)

    }}

  >

    {({ isSubmitting }) => (

      <Form>

        <Field type=”text” name=”name” />

        <Field type=”email” name=”email” />

        <button type=”submit” disabled={isSubmitting}>

          Submit

        </button>

      </Form>

    )}

  </Formik>

)

export default MyForm

Burada önce Formik , Form ve Field bileşenlerini Formik kitaplığından içe aktarırsınız. Ardından, MyForm adlı bir bileşen oluşturun. Bu bileşen, iki alana sahip bir form oluşturur: ad ve e-posta.

initialValues ​​prop, form alanlarının başlangıç ​​değerlerini ayarlar. Bu durumda ad ve e-posta alanlarının ikisi de boş dizelerdir.

validate prop, form alanları için doğrulama kurallarını belirler. Bu durumda, ad alanı zorunludur ve e-posta alanı normal bir ifadeyle eşleşmelidir.

onSubmit özelliği, kullanıcı formu gönderdiğinde React’in çağıracağı işlevi ayarlar. Bu durumda fonksiyon, form alanlarının değerlerini gösterecek bir uyarıdır.

isSubmitting özelliği, formun şu anda gönderilip gönderilmediğini belirler. Bu durumda, onu false olarak ayarlarsınız.

Son olarak, Formik’ten Form bileşenini kullanarak formu oluşturun.

E-posta ve ad alanı içeren Next.js formu

Next.js’deki formları doğrulamak için Formik gibi harici bir kitaplık kullanmanın çeşitli faydaları vardır. Avantajlardan biri, kullanıcıya hata mesajlarını göstermenin çok daha kolay olmasıdır. Örneğin, gerekli bir alan doldurulmazsa, Formik otomatik olarak önerilen bir düzeltmeyi içeren bir hata mesajı görüntüler.

Diğer bir faydası ise Formik’in daha karmaşık doğrulama kurallarını işleyebilmesidir. Örneğin, iki alanın aynı olduğunu doğrulamak için Formik’i kullanabilirsiniz (şifre ve şifre onay alanı gibi).

Son olarak, Formik, form verilerini bir sunucuya göndermeyi kolaylaştırır. Örneğin, form verilerini bir API’ye göndermek için Formik’i kullanabilirsiniz.

Formları Kullanarak Kullanıcı Etkileşimini Artırın

Kullanıcı etkileşimini artırmak için formları kullanabilirsiniz. Bir kullanıcı geçersiz veri girdiğinde geri bildirim sağlayarak, hayal kırıklığı ve karışıklığın önlenmesine yardımcı olabilirsiniz.

Dış kitaplıkları kullanarak otomatik tamamlama ve koşullu alanlar gibi özellikler ekleyebilirsiniz. Bunlar, formlarınızı daha da kullanıcı dostu hale getirmenize yardımcı olabilir. Formlar doğru kullanıldığında, kullanıcı etkileşimini artırmanıza ve ihtiyaç duyduğunuz verileri toplamanıza yardımcı olacak güçlü bir araç olabilir.

Doğrulamanın yanı sıra Next.js, kullanıcı etkileşimini artırmak için kullanabileceğiniz birçok özelliğe sahiptir.