javascriptForm values and constraint validationخواندن فرم و اعتبارسنجی مرورگر در جاوااسکریپت
فرم در جاوااسکریپت را درست بخوانید؛ تفاوت value و checked، متن FormData، قواعد required و min و اعتبارسنجی سفارشی با مثال مستقل.
مفهوم به زبان ساده
فرم، دادهٔ کاربر را در کنترل‌هایی مانند input و select نگه می‌دارد. input.value معمولاً متن است، حتی وقتی نوع ورودی number باشد. برای چک‌باکس، checked وضعیت بولی جاری را می‌دهد. پیش از محاسبه، مشخص کنید چه نوع و چه محدوده‌ای لازم دارید؛ ظاهر عددی کنترل به‌تنهایی قرارداد عددی برنامه را تضمین نمی‌کند.
ویژگی‌هایی مانند required، min و max بخشی از بررسی اولیه را به مرورگر می‌سپارند. checkValidity نتیجهٔ بولی می‌دهد؛ reportValidity علاوه بر بررسی می‌تواند پیام رابط را هم نمایش دهد. در نمونه، یک فرم مستقل با تعداد بین یک تا پنج می‌سازیم و ابتدا حالت خالی و سپس مقدار سه را بررسی می‌کنیم. FormData مقدار کنترل نام‌دار را به شکل متن برمی‌دارد؛ کنترل غیرفعال معمولاً در این داده قرار نمی‌گیرد.
setCustomValidity برای قانون اختصاصی پیام تعیین می‌کند و برای رفع خطا باید دوباره رشتهٔ خالی به آن بدهیم. پیام قدیمی نباید پس از اصلاح ورودی باقی بماند. این ابزارها تجربهٔ کاربر را بهتر می‌کنند، اما درخواست را می‌توان بیرون فرم هم ساخت؛ سرور باید مستقل بررسی کند. برای تمرین، مرزهای یک، پنج، صفر و شش را آزمایش کنید و مقدار کاربر را پس از خطا نگه دارید.
کجا به کار می‌آید؟
- خواندن ورودی فرم با نوع و واحد روشن پیش از محاسبه
- نمایش خطای قابل اصلاح بدون پاک‌کردن ورودی کاربر
از تعریف تا یک مثال واقعی
const form = document.createElement('form');
const quantity = document.createElement('input');
quantity.name = 'quantity';
quantity.type = 'number';
quantity.required = true;
quantity.min = '1';
quantity.max = '5';
form.append(quantity);
console.log(form.checkValidity());
quantity.value = '3';
console.log(form.checkValidity());
console.log(typeof new FormData(form).get('quantity'));
quantity.setCustomValidity('نمونهٔ خطای اختصاصی');
console.log(form.checkValidity());
quantity.setCustomValidity('');
console.log(form.checkValidity());
false true string false true
این مثال چطور کار می‌کند؟
ورودی اجباری خالی است و بررسی نخست false می‌شود.
مقدار سه داخل محدوده است و FormData آن را متن می‌گیرد.
پیام اختصاصی فرم را نامعتبر می‌کند؛ پاک‌کردن پیام، اعتبار را برمی‌گرداند.
اشتباه رایج
پذیرفتن ورودی توسط فرم جای بررسی سرور نیست. همچنین باقی‌ماندن متن setCustomValidity باعث می‌شود ورودی اصلاح‌شده هنوز نامعتبر بماند.
این را به خاطر بسپارید
دادهٔ فرم را صریح بخوانید، خطای قابل فهم بدهید و قرارداد داده را مستقل از کنترل مرورگر بررسی کنید.