اعتبارسنجی فرم ها (به فصل 9 خوش آمدید)

0
47
اعتبار سنجی فرم ها (به فصل 9 خوش آمدید)

اعتبارسنجی فرم ها (به فصل 9 خوش آمدید)

برنامه ی همبرگرساز ما به خوبی جلو رفته است و حالا می توانیم سفارشات را ثبت و آن ها را از پایگاه داده دریافت کنیم اما در طول این دوره هیچ صحبتی از اعتبارسنجی فرم ها (form validation) نکرده ایم. در حال حاضر فرمی را به کاربر نمایش می دهیم اما باز هم اطلاعات خودمان را ارسال می کنیم. بنابراین وقت آن رسیده است که فرم خود را بررسی کنیم.

برای شروع می خواهم input های فرم خود را (در فایل ContactData.js) درون یک کامپوننت جداگانه قرار بدهم. بنابراین وارد پوشه ی components و سپس UI شوید. درون UI یک پوشه ی جدید به نام Input بسازید که حاوی دو فایل input.js و input.module.css باشد. مثل همیشه کدهای ما برای شروع در فایل input.js به شکل زیر است:

حالا از یک Div به عنوان عنصر ریشه ای استفاده می کنیم و فعلا یک label را در آن می گذاریم. متن این label قرار است از بیرون این کامپوننت بیاید بنابراین متن را به صورت یک prop با نام دلخواه تعیین کنید:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

من در اینجا از یک switch عادی جاوا اسکریپت استفاده کرده ام تا مشخص کنم که input ما از چه نوعی باشد و فکر می کنم نحوه ی کار آن بسیار ساده است و نیازی به توضیحات اضافی ندارد. حالا می خواهیم کاری کنیم که attribute های زبان HTML برای فرم ها را به صورت prop پاس دهیم تا بتوانیم آن ها را روی هر عنصر اعمال کنیم (همان inputType). بنابراین:

با اپراتور spread کاری می کنیم که attribute های شما روی عنصر مورد نظر قرار بگیرند و دیگر از این جهت مشکلی نخواهیم داشت. در مرحله ی بعد باید inputElement را درون return قرار دهیم:

فعلا این کامپوننت را در همین حد ساده نگه می داریم و به سراغ استایل دهی آن می رویم. وارد فایل input.module.css شوید و کلاس های زیر را در آن ایجاد کنید:

سپس برای هر کدام از input ها نوع کلاس خودشان را تعیین کنیم:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

ما کلاس های مورد نظر را روی هر کدام از input ها، روی div ریشه ای و روی label اعمال کرده ایم که در کد بالا قابل مشاهده است. در مرحله ی بعد وارد ContactData.js می شویم و input را وارد آن می کنیم:

اگر در حال حاضر به <Form> نگاه کنید کدهای زیر را می بینید:

دیگر هیچ نیازی به className های این کد نداریم، بنابراین آن ها را حذف کنید. همچنین کلاس Input. را نیز از فایل ContactData.module.css حذف کنید. سپس این input های عادی را با Input خود (کامپوننتی که ساختیم) جایگزین می کنیم:

توجه کنید که من prop ای به نام inputType را هم به آن پاس داده ام تا در آن ساختار switch که قبلا تعریف کردیم، نوع input به شکل صحیح مشخص شود. تمامی فایل ها را ذخیره کرده و به مرورگر بروید و یک همبرگر را تا صفحه ی checkout سفارش دهید. در این قسمت می بینید که فرم ما صحیح و سالم نمایش داده می شود  اما در console مرورگر به خطای جالبی برمی خوریم که به خاطر تغییرات نسخه ی 16 کتابخانه ی react است. در واقع از نسخه ی 16 به بعد دیگر اجازه ی استفاده از inputType به عنوان یک prop را نداریم به دلیل اینکه HTML به بزرگی و کوچکی حروف حساس نیست و inputType را به صورت inputtype درک می کند. برای حل این مشکل inputType را به صورت inputtype می نویسیم:

همچنین در ContactData نیز همین کار را می کنیم:

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

ترتیبی که روکسو برای یادگیری مطالب سری دوره جامع آموزش ری اکت به شما توصیه می‌کند:

ارسال دیدگاه

لطفا دیدگاه خود را وارد کنید!
نام خود را وارد کنید