DOM فرم ها (DOM Forms)
اینجا درباره «اعتبارسنجی فرم» حرف می زنیم. «اعتبارسنجی (Validation)» یعنی بررسی ورودی ها تا درست و مفید باشند. مثلا مثل برگه امتحان که باید کامل و خوانا باشد.
اعتبارسنجی فرم با جاوااسکریپت
جاوااسکریپت می تواند قبل از ارسال فرم، ورودی ها را چک کند. اگر فیلدی خالی بود، پیام بده و جلوی ارسال را بگیر.
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x === "") {
alert("Name must be filled out");
return false;
}
}
نکته: «فرم (Form)» همان جعبه ورودی هاست. «رویداد onsubmit» هنگام ارسال فرم اجرا می شود.
اعتبارسنجی عددی و بازه ها
می توان ورودی عددی را بررسی کرد. مثلا آیا بین 1 تا 10 است یا نه. برای نمونه آماده از لینک آزمایشی استفاده کن.
اعتبارسنجی خودکار مرورگر (HTML)
مرورگرها با ویژگی هایی مثل required خودکار چک می کنند. این کار قبل از ارسال انجام می شود و بسیار ساده است.
گام های عملی
- فرم را انتخاب کن و رویداد
onsubmitرا وصل کن. - فیلدهای لازم را بررسی کن و پیام مناسب بده.
- در صورت خطا
falseبرگردان و ارسال را متوقف کن.
روش ها و نکات تکمیلی
- «سمت کاربر (Client-side)» سریع است و تجربه را بهتر می کند.
- «سمت سرور (Server-side)» ضروری و مطمئن تر است.
- از ویژگی های محدودیت مثل
min،max،patternکمک بگیر.
برای مرور سریع DOM در تغییر محتوا، صفحه DOM HTML را ببین. همین طور برای جستجوی عناصر، به DOM عناصر سر بزن. مطالب بیشتر درباره اعتبارسنجی فرم را هم در همین بخش دنبال کن.
جمع بندی سریع
- اول ورودی ها را چک کن، بعد فرم را بفرست.
requiredساده و کاربردی است.- خطا را واضح و کوتاه نشان بده.
- اعتبارسنجی سمت سرور را فراموش نکن.