Next.js ile form doğrulama işlemi, Next.js’in yerleşik özelliklerinden biri olan Form bileşeni ve form doğrulama kütüphanesi olan yup kullanılarak gerçekleştirilebilir.
İlk olarak, yup kütüphanesini projeye yüklemek için terminalde aşağıdaki komutu çalıştırın:
npm install yup
Daha sonra, formu oluşturmak için bir bileşen oluşturun. Form bileşenine gerekli alanları ekleyin ve bunların her biri için name, id ve value özelliklerini ayarlayın. Form bileşeni, formu göndermek için bir handleSubmit işlevi içerebilir.
import { Formik, Form, Field } from ‘formik’;
import * as yup from ‘yup’;
const validationSchema = yup.object().shape({
name: yup.string().required(),
email: yup.string().email().required(),
message: yup.string().required(),
});
const ContactForm = () => {
const handleSubmit = (values) => {
console.log(values);
};
return (
<Formik initialValues={{ name: '', email: '', message: '' }} onSubmit={handleSubmit} validationSchema={validationSchema}>
{({ errors, touched }) => (
<Form>
<div>
<label htmlFor="name">Name:</label>
<Field id="name" name="name" type="text" />
{touched.name && errors.name && <div>{errors.name}</div>}
</div>
<div>
<label htmlFor="email">Email:</label>
<Field id="email" name="email" type="email" />
{touched.email && errors.email && <div>{errors.email}</div>}
</div>
<div>
<label htmlFor="message">Message:</label>
<Field id="message" name="message" as="textarea" />
{touched.message && errors.message && <div>{errors.message}</div>}
</div>
<button type="submit">Submit</button>
</Form>
)}
</Formik>
);
};
export default ContactForm;
Yukarıdaki örnekte, Formik bileşeni, formun ana bileşenidir. initialValues, formdaki giriş alanlarının varsayılan değerlerini belirtir. onSubmit işlevi, form gönderildiğinde çalıştırılacak olan işlevi belirtir. validationSchema, formda kullanılan giriş alanlarının doğruluğunu kontrol eden bir şema nesnesidir.
Field bileşenleri, formdaki giriş alanlarını temsil eder. id ve name özellikleri, giriş alanlarının kimliğini belirlerken, type özelliği, giriş alanının türünü belirler. as özelliği, textarea gibi belirli giriş alanı türleri için kullanılır. touched ve errors özellikleri, giriş alanlarının doğruluğunu kontrol etmek için validationSchema kullanıldığında kullanılır.
Son olarak, formu bir bileşende kullanabilir.