✅ چهارم – بررسی اعتبارسنجی فرم‌ها سمت Client – بخش دوم

🔹 مهم‌ترین Attributeها در اعتبارسنجی:

• required → الزام به پرکردن فیلد
• pattern → استفاده از Regular Expression برای کنترل ساختار ورودی
• title → نمایش پیام راهنمای معتبر برای pattern
• min / max → تعیین بازه عددی یا تاریخی
• minlength / maxlength → تعداد کاراکترهای مجاز در ورودی متن
• autofocus → فوکوس اولیه روی این فیلد هنگام لود
• autocomplete="on/off" → پیشنهاد خودکار مرورگر برای ورودی‌ها
• type → هر type یک اعتبارسنجی پیش‌فرض دارد (email, url, password و ...)

🔹 استایل‌دهی به حالت‌های اعتبارسنجی:

• input:valid → المان معتبر ✔
• input:invalid → المان نامعتبر ✖
  ✅ قابلیت تغییر رنگ پس‌زمینه، Border و…

🔹 مثال‌ها در کد:

• شماره موبایل ایران

pattern="^(?:\+98|0)?9\d{9}$"

• ورود فقط حروف فارسی و انگلیسی

pattern="^[آ-یa-zA-Z\s]+$"

• ایمیل استاندارد

pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"

• کلمه عبور حداقل ۸ کاراکتر با حداقل یک عدد

pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"

✅ پنجم – بررسی اعتبارسنجی فرم‌ها سمت Client – بخش سوم

تمرکز بر UX اعتبارسنجی و نمایش وضعیت ورودی به کاربر:

✔ استفاده از آیکن‌های نشانه‌گر صحت ورودی

• با استفاده از انتخاب‌گر:

.input-group input:valid ~ i.fa-circle-check {
  opacity: 1;
}
.input-group input:invalid ~ i.fa-circle-xmark {
  opacity: 1;
}

🔸 وقتی input معتبر باشد آیکن تیک نمایش داده می‌شود
🔸 وقتی نامعتبر باشد آیکن ضربدر دیده می‌شود

✔ اعتبارسنجی ورودی‌ها در لحظه

• با تغییر رنگ پس‌زمینه فیلد در حالت:

input:valid { background: #d7ffea; }  /* سبز کمرنگ */ input:invalid { background: #ffd7d7; } /* قرمز کمرنگ */ 

→ کاربر بدون کلیک روی دکمه Submit متوجه اشتباهات می‌شود

✔ بهبود پیام‌های Validation

• استفاده از:

oninvalid="this.setCustomValidity('پیام دلخواه برای خطا')"

• نمایش پیام راهنمای بهتر با title هنگام خطا

✔ نکته UX مهم

• اگر pattern + required استفاده شود:
  → کاربر تا زمان صحیح وارد کردن، امکان Submit ندارد

📌 نتیجه‌گیری کلی از بخش دوم و سوم

✅ استفاده از Attributeهای HTML5 برای جلوگیری از ارسال داده اشتباه
✅ افزایش سرعت و کیفیت تعامل کاربر با فرم
✅ عدم نیاز به جاوااسکریپت برای اعتبارسنجی‌های پایه
✅ نمایش لحظه‌ای صحت ورودی برای تجربه کاربری بهتر