نحوه تأیید فرم ها با استفاده از Formik در React js

Summarize this content to 400 words in Persian Lang
در وب مدرن ما، فرم ها بخش بسیار مهمی از وب هستند، ما از آن برای جمع آوری داده ها از کاربران استفاده می کنیم. از فرم ها می توان برای استفاده از کاربران در یک پلت فرم، برای نظرسنجی و غیره استفاده کرد.

با این حال، مدیریت حالت فرم، اعتبار سنجی، و منطق ارسال اغلب می تواند دست و پا گیر و مستعد خطا باشد، به خصوص که فرم ها در پیچیدگی رشد می کنند.

فرمیک

Formik یک کتابخانه عالی است که به شما کمک می‌کند تا حالت‌های فرم، اعتبارسنجی‌ها و سایر ویژگی‌های شگفت‌انگیز مانند نشان دادن تعداد کاراکترهایی که کاربر هنگام تایپ به فیلد ورودی می‌دهد را مدیریت کنید.

در این مقاله، ما قصد داریم Formik را بررسی کنیم، نحوه استفاده از آن برای اعتبارسنجی فرم، منطق ارسال و مدیریت حالت های فرم آسان است.

پیش نیازهایی که برای درک این مقاله نیاز دارید

1. دانش اولیه React js.2. درک اساسی از نحوه عملکرد فرم در React js.3. درک اولیه جاوا اسکریپت.4. باید Node js را روی رایانه خود نصب کرده باشید (برای اجرای برنامه React)5. و در نهایت، یک مرورگر وب مانند گوگل کروم.

برای این مقاله، من از یک ویرایشگر کد آنلاین به نام Codesandbox استفاده خواهم کرد. می توانید ادامه دهید و از آن نیز استفاده کنید، همچنین می توانید برنامه معمولی React js را در رایانه خود ایجاد کنید.

Codesandbox یک ویرایشگر کد آنلاین است که به توسعه دهندگان اجازه می دهد حتی بدون لپ تاپ خود کد روی وب بنویسند. زمان زیادی را ایمن می کند، به جای نصب React js، Next js یا هر فریمورک دیگری، codesandbox به شما امکان می دهد به جای اتلاف وقت برای نصب، آنها را در چند ثانیه انتخاب کنید. این به شما امکان می دهد کتابخانه ها را نیز در چند ثانیه به طور مساوی انتخاب کنید. این شگفت انگیز است درست است؟ جالب ترین قسمت این است که نسخه رایگان دارد که می توانید از آن استفاده کنید

نصب و راه اندازی

برای اینکه بتوانیم از Formik استفاده کنیم، قبل از اینکه بتوانیم از آن استفاده کنیم، باید آن را نصب کنیم.

npm install formik –save

همچنین باید کتابخانه دیگری به نام yup نصب کنیم، yup به ما کمک می کند تا فیلدهای ورودی را بر اساس ترجیح خود تأیید کنیم. ما می توانیم تصمیم بگیریم که یک فیلد ورودی چقدر باید باشد، کاراکترهایی که باید حاوی آن باشد و غیره.

npm i yup

پس از آن، می توانیم فرمیک را راه اندازی کنیم و شروع به اتصال آن با فرم خود کنیم.

import { useFormik } from ‘formik’;
import * as yup from “yup”;

const formik = useFormik({
enableReinitialize: true,
initialValues: {
name: “”,
surname: “”,
number: “”,
},

validationSchema: yup.object({
name: yup
.string()
.trim()
.max(10, “name cannot be more than 10 characters”),

surname: yup
.string()
.trim()
.max(10, “Surname cannot be more than 10 characters”),

number: yup
.string()
.trim()
.max(5, “Your number cannot be more than 5 digits”),
}),

onSubmit: (values) => {},
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

شما به وضوح می توانید ببینید که من چگونه از yup برای تصمیم گیری در مورد طول فیلد ورودی استفاده کردم، همچنین می توانید رمزهای عبور، پیوندها و غیره را با Yup بررسی کنید.

بیایید فرم را ایجاد کنیم

باید فرم را ایجاد کنیم و فیلدهای ورودی را با Formik متصل کنیم، باید مطمئن شویم نامی که به فیلدهای ورودی می‌دهیم با مرجع آن در Formik initialValues ​​مطابقت داشته باشد.

فیلد ورودی زیر را بررسی کنید، به وضوح می بینید که نام با نام در مقادیر اولیه در تنظیمات فرمیک برابر است. بدون این، ممکن است مشکلاتی در زمینه ورودی خود داشته باشید.

type=”text”placeholder=”Your name”name=”name”value={formik.values.name}onChange={formik.handleChange}onBlur={formik.handleBlur}/>

`

import * as yup from “yup”;import { useFormik } from “formik”;import { useState } from ‘react’;

export default function Form() {const [isSubmitting, setIsSubmitting] = useState(false);const [submissionError, setSubmissionError] = useState(null);const formik = useFormik({enableReinitialize: true,initialValues: {name: “”,surname: “”,number: “”,},

validationSchema: yup.object({
name: yup
.string()
.trim()
.max(10, “name cannot be more than 10 characters”),

surname: yup
.string()
.trim()
.max(10, “Surname cannot be more than 10 characters”),

number: yup
.string()
.trim()
.max(5, “Your number cannot be more than 5 digits”),
}),

onSubmit: async (values) => {
setIsSubmitting(true);
setSubmissionError(null);

try {
const response = await axios.post(‘/api/submit’, values);
console.log(‘Form submitted successfully:’, response.data);
// Optionally reset form
formik.resetForm();
} catch (error) {
setSubmissionError(error.message || ‘Failed to submit form’);
} finally {
setIsSubmitting(false);
}
},

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

})؛برگشت ({/* برچسب con */}اسم شما
{formik.values.name.length}/10
{/* input control */}

{formik.touched.name && formik.errors.name && (
{formik.errors.name}
)}
گزینه enableReinitialize در قلاب useFormik یک ویژگی حیاتی است که به Formik اجازه می دهد تا حالت فرم را با مقادیر اولیه جدید مجدداً راه اندازی کند. به طور پیش فرض، Formik فقط یک بار حالت فرم را مقداردهی اولیه می کند و تغییرات بعدی در مقادیر اولیه در حالت فرم منعکس نمی شود. با تنظیم enableReinitialize بر روی true، Formik هر زمان که prop initialValues ​​تغییر کند، حالت فرم را با مقادیر اولیه جدید مجدداً راه اندازی می کند. این به ویژه هنگام کار با فرم‌های پویا مفید است، جایی که مقادیر اولیه ممکن است بر اساس تعاملات کاربر یا سایر تغییرات حالت برنامه تغییر کند. با فعال کردن مقداردهی مجدد، می توانید اطمینان حاصل کنید که حالت فرم شما به روز و دقیق باقی می ماند، حتی با تغییر مقادیر اولیه.شما می توانید به وضوح ببینید که چگونه ما به مقدار هر فیلد ورودی از Formik به صورت بلادرنگ و بدون استفاده از useState دسترسی پیدا می کنیم.مطمئن شوید که واقعاً به وضعیت درست دسترسی دارید، همانطور که از مثال می بینید، ما به درستی به هر مقدار حالت دسترسی داریم.ما از تابع onChange داخلی در Formik برای به روز رسانی هر حالت ورودی در حالی که کاربر در حال تایپ است استفاده می کنیم. بنابراین ما انجام می دهیمt really need to create anything else, thatعالیه درسته 😊؟ما همچنین از تابع onBlur در فرمیک استفاده می کنیم تا به Formik اطلاع دهیم که چه زمانی یک فیلد ورودی فوکوس خود را از دست می دهد تا بتواند بررسی کند که آیا کاربر واقعاً مقدار ورودی مناسب را می دهد یا خیر.هر زمان که فیلد ورودی با اعتبارسنجی ما مطابقت نداشته باشد، پیام خطایی را که در yup مشخص کرده ایم، برای هر فیلد ورودی نمایش می دهیم. شما به وضوح می توانید آن را در کد مشاهده کنید.همچنین می‌توانیم طول یک مقدار ورودی را در حین تایپ کردن کاربر نشان دهیم، این به کاربران کمک می‌کند تا از طول آنچه تایپ می‌کنند مطلع شوند.سبک دکمه پویا است، زمانی که تمام فیلدهای ورودی خالی باشند، دکمه نوعی سبک خاص خواهد داشت. اما وقتی در یکی از فیلدهای ورودی مقداری داشته باشیم، استایل دکمه نیز تغییر می کند.اگر مقداری در فیلدهای ورودی نداشته باشیم و محتوای دکمه نیز پویا باشد، دکمه نیز غیرفعال می شود. هنگامی که داده های فرم را ارسال می کنیم، دکمه را نیز غیرفعال می کنیم.این کار از ارسال فرم های خالی توسط کاربران جلوگیری می کند.تابع ارسال به ما امکان می دهد داده های فرم را به نقطه پایانی یا مکان مورد نظر خود ارسال کنیم. شما می توانید هر منطقی را در آنجا بنویسید، فقط مطمئن شوید که تابع ارسال به فرم متصل است تا زمانی که کاربر روی دکمه ارسال کلیک می کند فعال شود.در مورد ما، ما سعی می کنیم داده های فرم را به یک نقطه پایانی ارسال کنیم، اگرچه واقعی نیست. اما منطق این است که داده های فرم را با کمک Axios به یک نقطه پایانی ارسال می کند.همانطور که می بینید، مدیریت و اعتبارسنجی مقادیر فرم با Formik بسیار آسان است.مدیریت حالت‌های فرم و اعتبارسنجی، گام‌های بسیار ضروری برای اطمینان از اینکه واقعاً داده‌های درستی را از کاربران دریافت می‌کنیم، هستند، اما انجام این کار معمولاً کاری در پارک نیست.Formik یک کتابخانه بسیار شگفت انگیز است که به ما کمک می کند تا داده های فرم را به طور موثر مدیریت کنیم، همچنین دارای ویژگی های شگفت انگیز دیگری مانند دریافت طول یک مقدار ورودی، تابع handleChange، تابع handleBlur، پیام های خطا و غیره است.با ترکیب yup، ما در واقع می توانیم مقادیر ورودی را بر اساس ترجیح خود تأیید کنیم.امیدوارم اکنون اصول اولیه Formik و نحوه تأیید فرم ها را با Formik و Yup درک کرده باشید.

import { useFormik } from 'formik';
import * as yup from "yup";

const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
      name: "",
      surname: "",
      number: "",
    },

    validationSchema: yup.object({
      name: yup
        .string()
        .trim()
        .max(10, "name cannot be more than 10 characters"),

      surname: yup
        .string()
        .trim()
        .max(10, "Surname cannot be more than 10 characters"),

      number: yup
        .string()
        .trim()
        .max(5, "Your number cannot be more than 5 digits"),
    }),

    onSubmit: (values) => {},
  });

validationSchema: yup.object({
  name: yup
    .string()
    .trim()
    .max(10, "name cannot be more than 10 characters"),

  surname: yup
    .string()
    .trim()
    .max(10, "Surname cannot be more than 10 characters"),

  number: yup
    .string()
    .trim()
    .max(5, "Your number cannot be more than 5 digits"),
}),

 onSubmit: async (values) => {
  setIsSubmitting(true);
  setSubmissionError(null);

  try {
    const response = await axios.post('/api/submit', values);
    console.log('Form submitted successfully:', response.data);
    // Optionally reset form
    formik.resetForm();
  } catch (error) {
    setSubmissionError(error.message || 'Failed to submit form');
  } finally {
    setIsSubmitting(false);
  }
},

      {/* input control */}
      

      {formik.touched.name && formik.errors.name && (
        
{formik.errors.name}
      )}