به کاربران کمک کنید تا داده های مناسب را در فرم ها وارد کنند

مرورگرها دارای ویژگی‌های داخلی برای تأیید اعتبار هستند تا بررسی کنند که کاربران داده‌ها را در قالب صحیح وارد کرده‌اند. شما می توانید این ویژگی ها را با استفاده از عناصر و ویژگی های صحیح فعال کنید. علاوه بر این، می توانید اعتبار سنجی فرم را با CSS و جاوا اسکریپت افزایش دهید.

چرا باید فرم های خود را تأیید کنید؟

شما در ماژول قبلی یاد گرفتید که چگونه به کاربران کمک کنید از وارد کردن مکرر اطلاعات در فرم ها اجتناب کنند. چگونه می توانید به کاربران کمک کنید تا داده های معتبر را وارد کنند؟

پر کردن یک فرم بدون دانستن اینکه کدام فیلدها لازم است یا محدودیت های آن فیلدها خسته کننده است. به عنوان مثال، شما یک نام کاربری را وارد کرده و یک فرم ارسال می کنید — فقط برای اینکه متوجه شوید نام کاربری باید حداقل هشت کاراکتر داشته باشد.

شما می توانید با تعریف قوانین اعتبارسنجی و برقراری ارتباط با آنها به کاربران در این زمینه کمک کنید.

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

می توانید از HTML برای تعیین فرمت و محدودیت های صحیح برای داده های وارد شده در فرم های خود استفاده کنید. همچنین باید مشخص کنید که کدام فیلدها اجباری هستند.

سعی کنید این فرم را بدون وارد کردن اطلاعات ارسال کنید. آیا پیغام خطایی به <input> پیوست می‌بینید که به شما می‌گوید فیلد مورد نیاز است؟

این به دلیل ویژگی required اتفاق می افتد.

<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">

قبلاً آموخته اید که می توانید از انواع بیشتری استفاده کنید، برای مثال type="email" . بیایید نگاهی به ایمیل مورد نیاز <input> بیاندازیم.

سعی کنید این فرم را بدون وارد کردن اطلاعات ارسال کنید. آیا تفاوتی با نسخه آزمایشی قبلی وجود دارد؟ اکنون نام خود را در قسمت ایمیل وارد کنید و سعی کنید ارسال کنید. پیغام خطای متفاوتی می بینید. چگونه ممکن است؟ پیام دیگری دریافت می کنید زیرا مقداری که وارد کرده اید یک آدرس ایمیل معتبر نیست.

ویژگی required به مرورگر می گوید که این فیلد اجباری است. مرورگر همچنین بررسی می کند که آیا داده های وارد شده با فرمت type مطابقت دارند یا خیر. فیلد ایمیل نشان داده شده در مثال فقط در صورتی معتبر است که خالی نباشد و داده های وارد شده یک آدرس ایمیل معتبر باشد.

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

شما یاد گرفتید که چگونه یک فیلد را اجباری کنید. چگونه به مرورگر دستور می دهید که یک کاربر باید حداقل هشت کاراکتر را برای یک فیلد فرم وارد کند؟

نسخه ی نمایشی را امتحان کنید. پس از تغییر، اگر کمتر از هشت کاراکتر وارد کنید، نمی‌توانید فرم را ارسال کنید.

<label for="password">Password (required)</label>
<input required="" minlength="8" type="password" id="password" name="password">

قوانین اعتبارسنجی خود را به اشتراک بگذارید

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
  name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>

مطمئن شوید که همه کاربران قوانین اعتبارسنجی شما را درک می کنند. برای این کار، کنترل فرم را با عنصری که قوانین را توضیح می دهد، متصل کنید. برای انجام این کار، یک ویژگی aria-describedby را با id فرم به عنصر اضافه کنید.

ویژگی الگو

گاهی اوقات می خواهید قوانین اعتبار سنجی پیشرفته تری را تعریف کنید. باز هم می توانید از یک ویژگی HTML استفاده کنید. به آن pattern می گویند و می توانید یک عبارت منظم را به عنوان مقدار تعریف کنید.

<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">

در اینجا فقط حروف کوچک مجاز هستند. کاربر باید حداقل دو کاراکتر و نه بیشتر از بیست تا وارد کند.

چگونه این pattern را تغییر می دهید تا حروف بزرگ را نیز مجاز کند؟ آن را امتحان کنید .

اضافه کردن سبک ها

اکنون یاد گرفته اید که چگونه اعتبارسنجی را در HTML اضافه کنید. عالی نیست اگر بتوانید کنترل‌های فرم را بر اساس وضعیت اعتبارسنجی نیز استایل کنید؟ این کار با CSS امکان پذیر است.

نحوه استایل دادن به فیلد فرم الزامی

به کاربر نشان دهید که یک فیلد قبل از تعامل با فرم شما اجباری است.

می توانید فیلدهای required را با کلاس شبه CSS :required استایل کنید.

input:required {
  border: 2px solid;
}

سبک کنترل‌های فرم نامعتبر

آیا به خاطر دارید اگر داده های وارد شده توسط کاربر نامعتبر باشد چه اتفاقی می افتد؟ پیام خطای پیوست شده به کنترل فرم ظاهر می شود. وقتی این اتفاق می‌افتد، تطبیق ظاهر عنصر عالی نیست؟

می توانید از کلاس شبه :invalid برای اضافه کردن سبک به کنترل های فرم نامعتبر استفاده کنید. علاوه بر این، شبه کلاس :valid نیز برای استایل دادن به عناصر فرم معتبر وجود دارد.

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

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

برای تقویت بیشتر اعتبار سنجی فرم های خود، می توانید از JavaScript Constraint Validation API استفاده کنید.

پیام های خطای معنی دار ارائه دهید

قبلاً یاد گرفتید که پیام های خطا در همه مرورگرها یکسان نیستند. چگونه می توانید یک پیام را به همه نشان دهید؟

برای رسیدن به این هدف، از متد setCustomValidity() از Constraint Validation API استفاده کنید. بیایید ببینیم این چگونه کار می کند.

const nameInput = document.querySelector('[name="name"]');

nameInput.addEventListener('invalid', () => {
    nameInput.setCustomValidity('Please enter your name.');
 });

عنصری را که می‌خواهید پیام خطای سفارشی را در آن تنظیم کنید، جستجو کنید. به رویداد invalid عنصر تعریف شده خود گوش دهید. در آنجا پیام را با setCustomValidity() تنظیم می کنید. این مثال پیام Please enter your name. اگر ورودی نامعتبر باشد

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

کارهای بیشتری می توانید با Constraint Validation API انجام دهید. در ماژول بعدی نگاهی دقیق به استفاده از اعتبارسنجی با جاوا اسکریپت خواهید داشت.

نحوه اعتبار سنجی در زمان واقعی می توانید با گوش دادن به رویداد onblur یک کنترل فرم، اعتبار سنجی بلادرنگ را در جاوا اسکریپت اضافه کنید و هنگامی که کاربر یک فیلد فرم را ترک می کند، بلافاصله ورودی را تأیید کنید.

روی فیلد فرم در نسخه نمایشی کلیک کنید، "web" را وارد کنید و در جای دیگری از صفحه کلیک کنید. پیغام خطای بومی برای minlength را در زیر فیلد فرم مشاهده می کنید.

درباره پیاده سازی اعتبار سنجی بلادرنگ با جاوا اسکریپت در ماژول آینده بیشتر بیاموزید.

درک خود را بررسی کنید

دانش خود را در مورد اعتبارسنجی فرم ها آزمایش کنید

منابع

• پس از ارسال فرم، دکمه پرداخت را غیرفعال کنید
• CSS را اضافه کنید تا فرم بهتر کار کند