رویداد oninvalid در جاوا اسکریپت
در این بخش به بررسی رویداد oninvalid در جاوا اسکریپت می پردازیم، رویدادهای جاوا اسکریپت یکی از مهم‌ترین ابزارهایی هستند که به توسعه‌دهندگان وب کمک می‌کنند تا به تعاملات کاربر با صفحات وب پاسخ دهند. این رویدادها می‌توانند برای مدیریت انواع فعالیت‌ها مانند کلیک‌ها، تغییرات ورودی‌ها و حتی اعتبارسنجی فرم‌ها مورد استفاده قرار گیرند. یکی از رویدادهای بسیار مهم در فرم‌های HTML، رویداد oninvalid است که به توسعه‌دهندگان امکان می‌دهد تا هنگامی که یک ورودی فرم نادرست است یا به درستی پر نشده است، واکنش مناسبی نشان دهند.
هدف اصلی استفاده از رویداد oninvalid ایجاد یک تجربه کاربری بهتر است. با استفاده از این رویداد، می‌توانیم از وقوع خطاهای پرکردن فرم جلوگیری کنیم و کاربر را به‌طور مستقیم به مشکلات موجود راهنمایی کنیم. برای مثال، اگر کاربری فرمی را بدون پر کردن صحیح فیلدهای اجباری ارسال کند، با استفاده از oninvalid می‌توان پیغامی نمایان کرد که کاربر را از اشتباه آگاه سازد.
رویداد oninvalid چیست؟
رویداد oninvalid یکی از رویدادهای فرم در جاوا اسکریپت است که هنگامی رخ می‌دهد که داده‌های وارد شده در یک فیلد فرم با شرایط اعتبارسنجی مورد نیاز هماهنگ نباشد. در HTML5، ما می‌توانیم برای هر عنصر فرم مانند <input> یا <textarea> محدودیت‌هایی اعمال کنیم، مثل اجباری بودن یک فیلد، تعیین حداقل یا حداکثر کاراکترها و یا فرمت مشخصی برای وارد کردن داده‌ها (مانند ایمیل). زمانی که کاربر تلاش می‌کند فرمی با داده‌های نامعتبر ارسال کند، این رویداد به‌طور خودکار فعال می‌شود.
رویداد oninvalid عمدتاً در فرم‌هایی که نیاز به اعتبارسنجی داده‌ها دارند کاربرد دارد. با فعال شدن این رویداد، می‌توانیم با استفاده از جاوا اسکریپت پیغام‌های خطا را نمایش دهیم یا به کاربر راهنمایی‌های لازم را ارائه کنیم.
مثال ساده از رویداد oninvalid:
در این مثال، فیلد ایمیل با استفاده از ویژگی HTML5 required به‌عنوان یک فیلد ضروری تنظیم شده است. اگر کاربر تلاش کند فرم را بدون وارد کردن ایمیل ارسال کند، مرورگر به‌طور خودکار پیغامی برای کاربر نمایش می‌دهد. اما با استفاده از oninvalid، ما می‌توانیم پیغام‌های سفارشی ایجاد کنیم.
کاربردهای اصلی oninvalid
۱. اعتبارسنجی ورودی‌های کاربر
یکی از کاربردهای اصلی رویداد oninvalid اعتبارسنجی داده‌هایی است که توسط کاربر در فرم‌ها وارد می‌شود. برای مثال، می‌توانید مطمئن شوید که فیلدهای اجباری پر شده‌اند، یا اطلاعاتی مانند شماره تلفن یا ایمیل به‌درستی وارد شده‌اند.
در مثال زیر، رویداد oninvalid برای نمایش یک پیغام خطا سفارشی هنگامی که کاربر فرم را با یک فیلد نامعتبر ارسال می‌کند، استفاده می‌شود:
در این مثال، اگر شماره تلفن وارد شده با الگوی تعریف شده (pattern="\d{10}") مطابقت نداشته باشد، یک پیغام خطای سفارشی به‌جای پیغام پیش‌فرض مرورگر نمایش داده می‌شود.
۲. نمایش پیغام‌های خطای سفارشی
در حالت پیش‌فرض، مرورگرها پیغام‌های خطا را به زبان و قالبی که خودشان تعیین کرده‌اند، نمایش می‌دهند. این پیغام‌ها ممکن است همیشه به‌خوبی با نیازهای شما یا زبان کاربر سازگار نباشند. با استفاده از oninvalid، شما می‌توانید این پیغام‌ها را به‌طور کامل سفارشی کنید و به‌جای آن پیغامی که مناسب‌تر است نمایش دهید.
به‌عنوان مثال:
در اینجا، اگر کاربر سنی خارج از بازه‌ی ۱۸ تا ۹۹ وارد کند، پیغام خطای سفارشی نمایش داده می‌شود. همچنین از oninput استفاده شده تا به محض تصحیح خطا، پیغام خطا حذف شود.
۳. بهبود تجربه کاربری
رویداد oninvalid می‌تواند به بهبود تجربه کاربری کمک کند، زیرا به‌جای ارائه پیغام‌های خطای پیش‌فرض و خشک، توسعه‌دهندگان می‌توانند پیغام‌هایی متناسب با زبان و نوع کاربران خود ارائه دهند. برای مثال، در یک وب‌سایت ایرانی، بهتر است پیغام‌ها به زبان فارسی نمایش داده شوند و متناسب با نیازهای کاربران باشند.
افزودن راهنمایی‌ها و پیام‌های خطا که دقیقاً به کاربر می‌گوید چه اشتباهی رخ داده است، می‌تواند باعث کاهش نرخ خروج کاربر از فرم‌ها شود. در عین حال، کاربر احساس راحتی بیشتری خواهد داشت، زیرا راهنمایی‌های لازم برای رفع مشکلات در اختیار او قرار می‌گیرد.
ترکیب oninvalid با سایر رویدادهای جاوا اسکریپت
۱. استفاده از رویداد onsubmit همراه با oninvalid
رویداد oninvalid معمولاً زمانی به‌خوبی عمل می‌کند که با دیگر رویدادهای جاوا اسکریپت مانند onsubmit ترکیب شود. به‌عنوان مثال، می‌توانید از oninvalid برای نمایش پیغام‌های خطا استفاده کرده و از onsubmit برای مدیریت رفتار کلی فرم در هنگام ارسال داده‌ها بهره ببرید.
مثال:
در این مثال، هنگام رخ دادن رویداد onsubmit، تابع validateForm فراخوانی می‌شود که می‌تواند بررسی‌های بیشتری را روی فرم انجام دهد. این ترکیب باعث می‌شود تا توسعه‌دهندگان کنترل کامل بر روی فرآیند ارسال و اعتبارسنجی داده‌ها داشته باشند.
۲. ترکیب oninput با oninvalid برای بازخورد لحظه‌ای
استفاده از رویداد oninput به همراه oninvalid به شما امکان می‌دهد تا به محض اینکه کاربر خطایی را تصحیح کرد، پیغام خطا مخفی شود و بازخورد لحظه‌ای به کاربر ارائه شود.
<input type="text" id="name" name="name" required
oninvalid="this.setCustomValidity('لطفاً نام خود را وارد کنید.')"
oninput="setCustomValidity('')">در اینجا، با تصحیح فیلد ورودی توسط کاربر، پیام خطا به‌طور خودکار پاک می‌شود، که این روش می‌تواند باعث شود کاربران به راحتی و بدون اتلاف وقت فرم‌ها را پر کنند.
رویداد oninvalid یکی از ابزارهای قدرتمند جاوا اسکریپت برای مدیریت و اعتبارسنجی فرم‌ها است که با ترکیب آن با دیگر رویدادها و ویژگی‌ها، می‌توان تجربه کاربری بهتری ایجاد کرد. با استفاده از این رویداد می‌توانید خطاهای ورودی را به‌صورت دقیق‌تر و کاربرپسندتر مدیریت کنید. همچنین این رویداد به شما اجازه می‌دهد که پیغام‌های خطای سفارشی نمایش دهید و به این ترتیب، فرآیند پر کردن فرم‌ها برای کاربران راحت‌تر و بدون سردرگمی انجام شود.
منابع:
- Mozilla Developer Network (MDN) – HTML oninvalid Event
- W3Schools – HTML5 Form Validation
- JavaScript Info – Form Validation: oninvalid
آیا این مطلب برای شما مفید بود ؟
پست های مرتبط
