ما اعتبارسنجی فرم هامون رو هم میتونیم در سمت سرور انجام بدیم هم سمت فرانت ولی چون سمت فرانت احتمال دور زدنش بیشتره و میتونن با دستکاری inspector بیان و تغیرش بدن معمولا این اعتبار سنجی رو سمت سرور انجام میدهند
نکات UX که در طراحی فرم هامون بهتر هستش که بیایم و رعایت بکنیم
--------------------------------------------------------------------
1 - فرم ها را کوتاه کنید
2- فواصل بین المان های فرم را برای جلوه بصری بهتر رعایت کنید
3- خطاها و باید ها رو واضح بیان کنید
4- از placeholder به عنوان برچسب استفاده نکنید ولی موقعی می تونیم استفاده بکنیم که وقتی کاربر اومد و روش کلیک کرد به بالا منتقل شود و باشد ولی از اون حالت قبلیش در اومده باشه
5- از auto-focus استفاده کنید
6- به کاربر اطلاع دهید Caps Lock کیبورد فعال است
7- از محدودیت های بصری استفاده کنید متناسب با طول المان هامون بیایم و براشون عرض مشخص کنیم
8- گزارش خطاها رو پنهان نکنید بزارید باشه
9- گزینه های اختیاری را به وضوح نشان دهید استفاده از * و اختیاری
10 - از تصاویر برای افزایش تعامل با کاربر استفاده کنید
احسنت به این پشتکار و نت برداری دقیق و مختصر همشون رو دنبال می کنم..’
نکته : هر موقع که خواستیم بیایم و در داخل سودو المنت هامون مثل Before و After از آیکون ها استفاده کنیم جدا از این که در داخل content اون میایم و unicode امون رو می نویسیم باید با استفاده از font Family نوع اون رو هم مشخص کنیم مثلا FontAwesome رو بنویسیم
در زمینه های اعتبار سنجی ها ما از تگ های فرم استفاده میکنیم و تگ های input امون در داخل اون قرار میدهیم
استفاده از autoComplete به صورت Off که به کاربرمون پیشنهاد های الکی ندهد که بهتر هستش در تگ فرم امون قرار دهیم
required که کاربر رو ملزم به این می کند که فرم اعتبار سنجی ما رو به صورت کامل بیاد و پر بکند همچنین با استفاده از مشخص کردن type می تونیم بیایم و اعتبار سنجی هامون رو دقیق تر کنیمبدون استفاده از ری جکس مثل استفاده از نوع های email و password و url و tel
با استفاده از minlength و maxLength می تونیم بیایم و بیشترین و کمترین مقدار های متن امون رو مشخص کنیم برای اینپوت هامون
با استفاده از pattern میتونیم بیایم و از Regex استفاده بکنیم
با استفاده از دو تا پراپرتی valid و invalid می توینم بیایم و روی تگ های اینپوت امون کنترل بیشتری داشته باشیم و هرکدوم که درست بود یا پر شد یک سری تغیرات بهش بدیم
حال برای فارسی کردن اون پیام هشدار required باید از یک ویژگی با نام oninvalid استفاده کنیم که در آن می توانیم از توابع جاوااسکریپت استفاده کنیم
oninvaid="this.setCustomValidity(" پیام ما" ) "
همچنین می توانیم یک باکس هم برای اون بیایم و درست کنیم و قرارش بدهیم
نکته : ما در هنگام استفاده از display : flex اگر به این مشکل خوردیم که عناصر مون به صورت column بودن می تونیم با تغیر دادن مقدار display : inline - flex عناصرمون رو به صورت row در یباریم