مرورگرها ویژگی‌های داخلی برای اعتبارسنجی دارند تا بررسی کنند که کاربران داده‌ها را در قالب صحیح وارد کرده‌اند. بااستفاده از عناصر و مشخصه‌های صحیح می‌توانید این ویژگی‌ها را فعال کنید. علاوه‌براین، می‌توانید اعتبارسنجی فرم را با 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">
نام مشخصه minlength است.
مقدار را روی 8 تنظیم کنید تا قانون اعتبارسنجی موردنظرتان را داشته باشید.
اگر برعکس آن را می‌خواهید، از maxlength استفاده کنید.
قوانین اعتبارسنجی‌تان را اعلام کنید
<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 را تغییر می‌دهید تا حروف بزرگ را هم مجاز کند؟
امتحان کنید.
پاسخ درست pattern="[a-zA-Z]{2,20}" است.
افزودن سبک‌ها
اکنون با نحوه افزودن اعتبارسنجی در 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 کنترل فرم، اعتبارسنجی هم‌زمان را در JavaScript اضافه کنید،
و ورودی را بلافاصله پس‌از اینکه کاربر فیلد فرم را ترک کرد اعتبارسنجی کنید.
روی فیلد فرم در نسخه نمایشی کلیک کنید،
«وب» را وارد کنید و روی جای دیگری در صفحه کلیک کنید.
پیام خطای اصلی minlength را در زیر فیلد فرم می‌بینید.
در مدول بعدی، درباره پیاده‌سازی اعتبارسنجی هم‌زمان با جاوا اسکریپت بیشتر بدانید.
میزان درک خود را بررسی کنید
دانش خود را درباره اعتبارسنجی فرم‌ها محک بزنید
از کدام مشخصه برای اجباری کردن کنترل‌های فرم استفاده می‌کنید؟
requiredneededessentialobligatoryآیا امکان تعریف پیام‌های خطای خودتان وجود دارد؟
message.:invalid.<input> با type="email" و مشخصه required را می‌توان ارسال کرد: