در دنیای طراحی تجربه کاربری (UX)، هر «فیلد اضافی» در فرمهای ثبتنام، یک مانع بالقوه برای نهایی کردن خرید کاربر است. یکی از این فیلدهای سنتی و گاهی خستهکننده در فروشگاههای مبتنی بر HikaShop، فیلد «تایید رمز عبور» (Confirm Password) است. اگرچه این فیلد با هدف جلوگیری از اشتباهات تایپی کاربر ایجاد شده، اما در عمل، اغلب باعث تکرارِ بیهوده و کاهش سرعت فرآیند ثبتنام میشود.
بهعنوان یک توسعهدهنده، همیشه به دنبال راهکارهایی هستم که بدون دستکاری هسته (Core Hacks) و بدون کاهش امنیت سایت، فرمهای جوملا را خلوتتر و هوشمندتر کنم. در این مطلب، میخواهم یک تکنیک ساده اما کاربردی را با شما به اشتراک بگذارم: پر کردن خودکار فیلد تایید رمز عبور.
با این روش، شما میتوانید فیلد تایید رمز را از دید کاربر پنهان (Hide) کنید، در حالی که در پسزمینه، سیستم به طور خودکار مقدار آن را با رمز اصلی همگامسازی میکند. نتیجه این کار چیست؟ یک فرم ثبتنام حرفهایتر، کاهش خطاهای اعتبارسنجی (Validation Errors) و در نهایت، تجربه کاربری روانتر برای مشتریانی که میخواهند سریعتر به مرحله خرید برسند.
در ادامه، با یک قطعه کد کوتاه JavaScript (بدون نیاز به jQuery و کتابخانههای سنگین)، پیادهسازی این قابلیت را مرحلهبهمرحله بررسی میکنیم.
document.addEventListener("DOMContentLoaded", function() {
var passField = document.getElementById('register_password');
var confirmField = document.getElementById('register_password2');
// چک کردن وجود هر دو فیلد برای جلوگیری از خطا در صفحات دیگر
if (passField && confirmField) {
passField.addEventListener('input', function() {
confirmField.value = passField.value;
});
}
});
این کد را باید در فایل جاوا اسکریپت قاب تان کپی کنید.
چرا این روش بهتر است؟
- DOMContentLoaded: این رویداد باعث میشود کد دقیقاً زمانی اجرا شود که ساختار HTML صفحه (DOM) کامل شده است، بنابراین حتی اگر کد در <head> صفحه هم باشد، کار میکند.
- if (passField && confirmField): چون این فایل user.js احتمالاً در کل سایت لود میشود، این شرط باعث میشود کد فقط در صفحاتی که این فرم وجود دارد اجرا شود و در صفحات دیگر (مثل صفحه اصلی یا تماس با ما) که این فیلدها را ندارند، کنسول خطا ندهد.
نکته: حتماً فایل user.js را یک بار با کلید ترکیبی Ctrl + F5 در مرورگر بازخوانی کن تا نسخه کش شده (Cached) با jQuery قبلی پاک شود.