JavaScript

به رویدادهای شکل پاسخ دهید

می توانید از جاوا اسکریپت برای پاسخ به تعاملات کاربر در فرم خود، نمایش فیلدهای اضافی فرم، ارسال فرم و موارد دیگر استفاده کنید.

به کاربران کمک کنید تا کنترل‌های فرم اضافی را پر کنند

تصور کنید که یک فرم نظرسنجی ساخته اید. پس از اینکه کاربر یک گزینه را انتخاب کرد، می خواهید یک <input> اضافی برای پرسیدن یک سوال خاص مرتبط با انتخاب نشان دهید. چگونه می توانید فقط عنصر <input> مربوطه را نشان دهید؟

فقط زمانی می‌توانید از جاوا اسکریپت برای نمایش <input> استفاده کنید که <input type="radio"> مرتبط در حال حاضر انتخاب شده باشد.

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

بیایید به کد جاوا اسکریپت برای نسخه آزمایشی نگاه کنیم. آیا به ویژگی های aria-controls و aria-expanded ویژگی ها توجه کرده اید؟ از این ویژگی‌های ARIA برای کمک به کاربران صفحه‌خوان استفاده کنید تا بفهمند چه زمانی یک کنترل فرم اضافی نشان داده یا پنهان می‌شود.

اطمینان حاصل کنید که کاربران می توانند فرمی را بدون ترک صفحه ارسال کنند

تصور کنید یک فرم نظر دارید. وقتی یک خواننده نظری اضافه می کند و فرم را ارسال می کند، اگر بتواند بلافاصله نظر را بدون بازخوانی صفحه ببیند، ایده آل خواهد بود.

برای رسیدن به این هدف، به رویداد onsubmit گوش دهید، سپس از event.preventDefault() برای جلوگیری از رفتار پیش‌فرض استفاده کنید و FormData با استفاده از Fetch API ارسال کنید.

اسکریپت باطن شما می‌تواند بررسی کند که آیا درخواست POST از مرورگر (با استفاده از ویژگی action عنصر فرم، جایی که method="post" ) است یا از جاوا اسکریپت، مانند درخواست fetch() است.

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

همیشه به کاربران صفحه خوان در مورد تغییرات محتوای پویا اطلاع دهید. یک عنصر با ویژگی aria-live="polite" به HTML خود اضافه کنید و محتوای عنصر را پس از تغییر به‌روزرسانی کنید. به عنوان مثال، پس از ارسال نظر توسط کاربر، متن را به "نظر شما با موفقیت ارسال شد" به روز کنید.

درباره مناطق زنده ARIA بیشتر بیاموزید.

اعتبار سنجی با جاوا اسکریپت

اطمینان حاصل کنید که پیام های خطا با سبک و لحن سایت شما هماهنگ هستند

جمله بندی پیام های خطای پیش فرض در مرورگرها متفاوت است. چگونه می توانید مطمئن شوید که پیام یکسان به همه کاربران نشان داده می شود و پیام با سبک و لحن سایت شما مطابقت دارد؟ از متد setCustomValidity() از Constraint Validation API برای تعریف پیام های خطای خود استفاده کنید.

اطمینان حاصل کنید که کاربران در مورد خطاها در زمان واقعی مطلع می شوند

ویژگی‌های داخلی HTML برای اعتبارسنجی فرم برای آگاه کردن کاربران در مورد فیلدهای فرم نامعتبر قبل از ارسال داده‌ها به باطن شما عالی است. آیا اطلاع رسانی به کاربران به محض خروج از یک فیلد فرم عالی نیست؟

به رویداد blur که با از دست دادن فوکوس عنصری فعال می‌شود گوش دهید و از واسط ValidityState برای تشخیص نامعتبر بودن یک کنترل فرم استفاده کنید.

اطمینان حاصل کنید که کاربران می توانند رمز عبوری را که وارد کرده اند ببینند

متن وارد شده برای <input type="password"> برای احترام به حریم خصوصی کاربران به طور پیش فرض پنهان است. به کاربران کمک کنید تا رمز عبور خود را وارد کنند، با نشان دادن یک <button> برای تغییر حالت مشاهده متن وارد شده.

نسخه ی نمایشی را امتحان کنید . با استفاده از <button> Show Password ، نمایان بودن متن وارد شده را تغییر دهید. این چگونه کار می کند؟ با کلیک بر روی Show Password ، ویژگی type فیلد رمز عبور را از type="password" به type="text" تغییر می‌دهید و متن <button> به "Hide Password" تغییر می‌کند.

مهم است که دکمه Show Password را در دسترس قرار دهید. با استفاده از ویژگی aria-controls <button> را با <input type="password"> وصل کنید.

برای اطلاع به کاربران صفحه‌خوان در صورت نمایش یا پنهان بودن رمز عبور، از یک عنصر پنهان با aria-live="polite" استفاده کنید و متن آن را مطابق با آن تغییر دهید. مهم است که کاربران صفحه‌خوان را فعال کنیم تا بدانند چه زمانی رمز عبور نمایش داده می‌شود و برای شخص دیگری که به صفحه آن نگاه می‌کند قابل مشاهده است.

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

درباره اجرای گزینه نمایش رمز عبور بیشتر بیاموزید.

منابع

• FormData
• Constraint Validation API
• <input type="password">