Next.js, form doğrulama işlemleri için özellikle yup gibi dışa aktarılan doğrulama şeması kütüphaneleriyle kolay bir entegrasyon sağlar. Bu sayede, bir formda girilen verilerin doğruluğunu kolayca kontrol edebilir ve hataları yönetebilirsiniz.
Aşağıdaki adımları izleyerek, Next.js kullanarak form doğrulama işlemlerini yapabilirsiniz:
İlk olarak, yup paketini yükleyin. Aşağıdaki komutu kullanarak yup paketini yükleyebilirsiniz:
npm install yup
Form bileşeninizi oluşturun. Bu, kullanıcının verileri girebileceği bir HTML formu içerecektir. Örneğin, aşağıdaki gibi bir form oluşturabilirsiniz:
jsx
import React, { useState } from 'react';
export default function MyForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const handleNameChange = event => setName(event.target.value);
const handleEmailChange = event => setEmail(event.target.value);
const handleSubmit = event => {
event.preventDefault();
console.log('Form submitted:', { name, email });
};
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">Name</label>
<input type="text" id="name" value={name} onChange={handleNameChange} />
</div>
<div>
<label htmlFor="email">Email</label>
<input type="email" id="email" value={email} onChange={handleEmailChange} />
</div>
<button type="submit">Submit</button>
</form>
);
}
Bu form, kullanıcının ad ve e-posta adresi gibi verileri girmesine olanak tanır ve bir “Gönder” düğmesi içerir.
yup kütüphanesinden bir şema (schema) oluşturun. Şema, formdaki her veri alanı için bir doğrulama kuralları kümesi belirtir. Örneğin, aşağıdaki kodda, name alanı için gerekli ve en az 3 karakter içeren bir değer olması gerektiğini ve email alanı için geçerli bir e-posta adresi olması gerektiğini belirtmektedir:
js
import * as yup from 'yup';
const schema = yup.object().shape({
name: yup.string().required().min(3),
email: yup.string().email().required(),
});
Formu göndermeden önce, form verilerini şema üzerinde doğrulayın. Şu şekilde yapılabilir:
const handleSubmit = async event => {
event.preventDefault();
const formData = { name, email };
await schema.validate(formData, { abortEarly: false });
console.log('Form submitted:', formData);
};
schema.validate işlevi, form verilerini doğrular ve geçerli olmayan verileri yakalar. Eğer bir doğrulama hatası varsa, yup doğrulama şeması, hangi alanın doğrulanamadığını ve hangi hataların meydana geldiğini açıklayan bir hata nesnesi döndürür. Bu hata nesnesini ele alabilir ve kullanıcıya hangi alanların yanlış olduğunu ve nasıl düzeltilebileceğini bildirebilirsiniz.
Yukarıdaki örnekte, abortEarly seçeneği, tüm hataları almak için false olarak ayarlanmıştır. Bu seçeneği ayarlamazsanız, varsayılan olarak ilk hatada doğrulama işlemi durur ve geri kalan tüm hatalar görmezden gelinir. Bu nedenle, abortEarly seçeneğini kullanarak, kullanıcının tüm hataları tek bir seferde görmesini sağlayabilirsiniz.
Örneğin, aşağıdaki gibi hata yakalama kodunu kullanabilirsiniz:
try {
await schema.validate(formData, { abortEarly: false });
console.log('Form submitted:', formData);
} catch (error) {
const errors = error.inner.reduce((acc, curr) => {
acc[curr.path] = curr.message;
return acc;
}, {});
console.log('Validation errors:', errors);
}
Bu kod, schema.validate işlevinin döndürdüğü hata nesnesinin inner özelliğine erişir ve her hatayı formdaki ilgili alan için bir hata mesajına dönüştürür. Bu mesajlar daha sonra kullanıcıya gösterilebilir veya hataların doğru şekilde ele alınmasına yardımcı olacak şekilde kullanılabilir.