اعتبارسنجی Form و handle کردن درخواست POST
شناسه پست: 3580
بازدید: 825

در ادامه قسمت قبلی، ما قصد داریم اعتبارسنجی را در form های React پیاده سازی کنیم و با ارسال یک درخواست POST به سمت سرور NET Core Web API. خود، یک موجودیت owner جدید را ایجاد کنیم.

در کامپوننت CreateOwner، ما تابع ()handleChangeEvent را به کامپوننت Input پاس میدهیم. ما میخواهیم از این تابع برای فعال کردن binding دوطرفه و اعتبارسنجی فیلدهای input خود استفاده کنیم. بنابراین پیاده سازی و ارسال درخواست POST مقصود ما در این مقاله میباشد.

اگر میخواهید تمام دستورالعملهای پایه و راهنمای کامل برای آموزش سریالی NET Core. را ببینید، این لینک را بررسی کنید: دستورالعملهای کار با NET Core.

این مقاله، قسمتی از مجموعه آموزشی زیر میباشد:

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

برای بررسی قسمت قبل، به این لینک مراجعه کنید:  تنظیم Form داینامیک

جهت دانلود سورس بر روی این لینک کلیک کنید: سری آموزشی React – قسمت 7

این پست به قسمتهای زیر تقسیم میشود:

Handle کردن OnChange Event با تابع handleChangeEvent

در حال حاضر، اگر ما هرچیزی را داخل فیلدهای input تایپ کنیم، هیچ اتفاق خاصی نمی افتد. به این دلیل است که در فایل InputConfiguration.js ما، تمام ویژگی‌های “value” برای همه ورودی‌ها بر روی رشته‌های خالی تنظیم شده‌اند (به جز datePicker، که تابع ()moment را می‌پذیرد که همیشه تاریخ جاری را بر روی آن اعمال میکند). مهمتر از آن این است که ما هرگز ویژگی value را در داخل آبجکت configuration تغییر نداده ایم، همینطور فیلدهای input خالی را.

ما می‌خواهیم با اجرای تابع handleChangeEvent این مشکل را برطرف کرده و یک اعتبارسنجی اضافه کنیم.

پس اجازه دهید تا فایل CreateOwner.js را با اضافه کردن تابع handleChangeEvent در زیر componentWillMount lifecycle hook اصلاح کنیم:

این function دو پارامتر میگیرد. پارامتر event که مقدار فیلدهای input ما را در خود نگه میدارد (نه فقط مقدار، اما مقدار برای ما مهمترین است) و پارامتر id که ما قصد داریم یکی از key های آبجکت configuration را به آن پاس دهیم (name ،address یا dateOfBirth).

ما اینجا داریم ownerForm را از state کپی عمیق میگیریم و سپس تنظیمات input تغییر یافته فعلی را با فراخوانی تابع executeValidationAndReturnFormElement به روز میکنیم. بعد از اعتبارسنجی، ما تعداد فیلدهای نامعتبر را بدست می آوریم و اگر فیلد نامعتبری وجود داشت، form ما به عنوان form نامعتیر mark میشود. در آخر، ما state را به روز میکنیم.

ایجاد Function های اضافی برای اعتبارسنجی React Form

ما در کد بالا، تابع های executeValidationAndReturnFormElement و countInvalidElements را داریم اما آنها هنوز ایجاد نشده اند.

پس بریم تا آنها را ایجاد کنیم.

بیایید فایل FormUtility.js را اصلاح کنیم:

اینجا ما ابتدا، خود formElement را که کاربر هم اکنون تغییر داده است را کپی میکنیم. سپس مقدار formElement را با استفاده از یک عملگر سه جانبه ( ternary operator) پر میکنیم (اگر کاربر ورودی dateOfBirth را تغییر دهد، سپس event همان value ما میباشد، اما برای هر فیلد ورودی دیگر، event آبجکتی است که ویژگی target را دارد که این ویژگی، ویژگی value را در خود نگه میدارد). علاوه بر این، ما می‌خواهیم ویژگی touched را برای کنترل خود set کنیم و سپس مقدار و قوانین اعتبارسنجی را به فرآیند اعتبارسنجی ارسال کنیم. پس از انجام فرآیند، نتایج را ذخیره می کنیم. در نهایت، formElement را با تمام تغییرات برمی گردانیم.

پیاده سازی تابع CheckValidity

پس تابع checkValidity را درست بالای تابع executeValidationAndReturnFormElement پیاده سازی میکنیم:

با کد بالا، ما بررسی میکنیم که آیا ما اصلا باید input را اعتبارسنجی کنیم یا خیر. اگر نیاز به اعتبارسنجی باشد سپس اعتبار سنجی را برای آن انجام میدهیم، اما اگر نیاز نداشته باشد (مانند dateOfBirth)، فقط همان خود object را دومرتبه برمیگردانیم.

در این فرآیند اعتبار سنجی، بررسی می کنیم که آیا فیلد مورد نظر، قانون required validation را دارد و در صورت داشتن آن را اعتبارسنجی می کنیم. سپس اگر هنوز معتبر باشد، در برابر قانون maxLength نیز آن را اعتبار سنجی می کنیم. در نهایت، ما فقط validationObject را برمی گردانیم.

اعتبارسنجی کامل Form در React

داخل تابع handleChangeEvent، ما یک تابع دیگر به نام countInvalidElements را فراخوانی کرده ایم. پس اجازه دهید این تابع را نیز درست پایین تابع executeValidationAndReturnFormElement  در فایل FormUtility.js پیاده سازی کنیم:

این function کاملا واضح و روشن است. ما اینجا داریم بر روی کل element های درون ownerForm حلقه میزنیم و به محض اینکه یک element نامعتبر را در آن پیدا کردیم، متغیر countInvalidElements را یک واحد افزایش میدهیم و از حلقه خارج میشویم. در آخر این متغیر را برمیگردانیم.

عالی.

حالا میتوانیم نتایج را بررسی کنیم.

form خالی (که هنوز touche نشده است):

دکمه غیرفعال در فرم خالی

اگر cursor را داخل فیلدهای input خود قرار دهیم و cursor را از روی آن برداریم:

فرم Create touche شده

نوع دیگر خطا:

حداکثر طول کاراکتر اعتبارسنجی فرم React

در آخر، form معتبر:

ایجاد فرم معتبر React Form Validation

اتصال کامپوننت CreateOwner با Reducer

اول از همه، تمام import های ضروری را اضافه میکنیم:

سپس تابع mapStateToProps  را قسمت پایین component ایجاد میکنیم:

بعد از آن، باید تابع mapDispatchToProps را زیر mapStateToProps ایجاد کنیم:

سپس عبارت export را تغییر میدهیم:

در نهایت، ما می‌خواهیم component های modal خود را در زیر تگ FormGroup، اما همچنان در داخل تگ Well اضافه کنیم:

و عبارات import را اضافه میکنیم:

SuccessModal ویژگی onCloseSuccessModal از تابع mapDispatchToProps را فراخوانی میکند. علاوه بر این، ErrorModal، ویژگی onCloseErrorModal از تابع mapDispatchToProps را فراخوانی میکند. هردوی این ویژگیها، تابع های dispatch هستند که هنوز پیاده سازی نشده اند. بنابراین این کاری است که باید انجام دهیم.

اصلاح Action و فایلهای Reducer

ما باید فایلهای خود را با افزودن function های دیگر برای بستن component های success modal و error modal تغییر دهیم.

پس دو نوع action دیگر داخل فایل ActionTypes.js اضافه میکنیم:

سپس فایل repositoryActions.js را با اضافه کردن تابع closeSuccessModal تغییر میدهیم:

ما باید فایل repositoryReducer.js را نیز اصلاح کنیم:

کار ما با success modal تمام شد. حالا همین کار را برای error modal انجام میدهیم.

ابتدا فایل errorHandlerActions.js را با افزودن یک function دیگر اصلاح میکنیم:

سپس فایل errorHandlerReducer.js را اصلاح میکنیم:

حالا تمام کاری که باید انجام دهیم ارسال یک درخواست POST از کامپوننت CreateOwner است.

Handle کردن درخواست POST

onSubmit event داخل تگ Form وجود دارد که به تابع createOwner اشاره میکند. پس اجازه دهید این تابع را زیر تابع handleChangeEvent پیاده سازی کنیم:

پایین این تابع، ما باید یک تابع دیگر برای عملکرد دکمه Cancel اضافه کنیم:

حالا میتوانیم نتایج را با هم بررسی کنیم:

پنجره Success modal

اگر خطا با کد وضعیت غیر از 404 یا 500 رخ دهد:

error modal bad request

نتیجه گیری

با خواندن این مطلب شما یاد گرفتید:

  • نحوه handle کردن رویداد onChange در یک فیلد input
  • نحوه اعتبارسنجی form داینامیک
  • نحوه استفاده از component های پنجره modal ایجاد شده در مقاله قبلی
  • شیوه handle کردن درخواست POST 

در قسمت بعدی این سری آموزشی، قصد داریم نحوه handle کردن درخواستهای PUT را یاد بگیریم. علاوه بر این، قصد داریم از hook های مختلف lifecycle در React استفاده کرده و نحوه آپدیت کردن state خود با داده های اصلاح شده از سرور را یاد بگیریم.

نویسنده

امید عباسی
من امید عباسی هستم. سالهاست که در زمینه برنامه نویسی با تکنولوژی دات نت فعالیت میکنم و عاشق این هستم که تجربیات و دانش خودم را در این زمینه با دیگران به اشتراک بزارم. خیلی دوست دارم که نظر و انتقاد خودتون رو در مورد این نوشته برای من بنویسید تا بتونم در آینده، مطالب بهتر و ارزشمندتری را برای شما فراهم کنم. در صورت داشتن هرگونه سوال هم در قسمت دیدگاه ها میتونید با بنده در ارتباط باشید