اعتبارسنجی فرم های وب با جاوا اسکریپت (JavaScript)

منظور از اعتبارسنجی (Validation) چیست؟

قبل از پرداختن به ادامه آموزش ذکر این نکته ضروری است که منظور از اعتبارسنجی (Validation) در فرم های وب یعنی مقایسه و بررسی معتبر بودن اطلاعاتی که کاربر در آنها وارد کرده با مقادیر مورد انتظار برنامه نویس، به طور مثال هنگامی که کاربر بدون تکمیل فیلدهای مورد نیاز و ضروری قصد ارسال فرم را دارد یا به فرض اگر در فیلد ایمیل آدرس خود را بدون علامت @ درج کند می توانیم ضمن جلوگیری از ارسال فرم پیغام هشداری نیز نمایش دهیم تا این موضوع قبل از ارسال فرم به اطلاع او برسد.
به طور کلی اعتبارسنجی در وب می تواند در دو مرحله صورت گیرد:
در سمت کاربر (در مرورگر - Client Side با برنامه نویسی زبان هایی مانند JavaScript) و همچنین در سمت سرور (Server Side و با برنامه نویسی سمت سرور مانند زبان های PHP, ASP.NET و...) ترکیب این روش ها نیز با استفاده از فناوری ای جکس (Ajax) امکان پذیر است که پیش از این در این رابطه در بخش آموزش های  ای جکس (Ajax) صحبت کرده ایم.

اعتبارسنجی سمت کاربر بهتر است یا سمت سرور؟

شاید در ذهنمان این سوال باشد که کدام شیوه اعتبارسنجی در وب بهتر است؟ اعتبارسنجی سمت کاربر و در مرورگر یا اعتبار سنجی سمت سرور؟
واقعیت این است هر کدام از انواع اعتبارسنجی ها در جای خود و در مرحله ای از تکمیل تا ارسال فرم های وب کاربرد دارند اما از نظر میزان اطمینان بخشی مسلما اعتبارسنجی سمت سرور گزینه بهتری است چون اعتبارسنجی سمت کاربر صرفا متکی بر امکانات مرورگر بوده و در دسترس بودن این امکانات از کنترل برنامه نویس خارج است، به فرض اگر به هر دلیل جاوا اسکریپت پشتیبانی نشود یا غیر فعال باشد این نوع اعتبارسنجی عمل نخواهد کرد، اما اعتبارسنجی سمت سرور تقریبا در هر شرایطی در دسترس است مگر اینکه سرور دچار اشکالی باشد که در این شرایط به طور کلی برنامه قادر به اجرای فرایندها نبوده یا عملکرد آن مختل می شود که در این صورت با نمایش پیام به کاربران می توانیم خطاها را مدیریت کنیم.
با این تفاسیر شاید این سوال به ذهن خطور کند که پس لزوم استفاده از اعتبارسنجی با جاوا اسکریپت چیست؟
اگرچه پیش از این گفتیم که به دلایل مختلف ممکن است جاوا اسکریپت در مرورگر کاربران در دسترس نباشد (به طور مثال جاوا اسکریپت غیرفعال شده باشد یا به فرض در مورد ارسال خودکار فرم های وب توسط ربات های خزنده با هدف انتشار هرزنامه ها یا دیدگاه های تبلیغاتی جاوا اسکریپت نادیده گرفته می شود) اما در عمل با توجه به فعال بودن پیش فرض این امکان در مرورگرهای مختلف می توانیم از امکانات این زبان در اکثر مواقع استفاده کنیم، لذا برای بهبود قابلیت های تعاملی برنامه ها یا راهنمایی کاربران در هنگام پر کردن فیلدهای مختلف صفحات وب همچنان می توانیم و توصیه می شود که علاوه بر اعتبارسنجی سمت سرور از جاوا اسکریپت نیز در ترکیب با آن استفاده کنیم، به این صورت هم رابط کاربری (User Interface) بهتری خواهیم داشت و ضمن صرفه جویی در وقت و زمان کاربران، تعداد درخواست های خام اعتبارسنجی نشده به سرور کاهش یافته و در نتیجه فشار به منابع آن کمتر می شود، خلاصه مطلب اینکه هیچگاه نباید صرفا متکی بر اعتبارسنجی سمت کاربر باشیم بلکه می توانیم در کنار اعتبارسنجی سمت سرور از امکانات جاوا اسکریپت نیز استفاده کنیم.

بررسی خالی نبودن فیلدهای فرم در هنگام ارسال

معمولا اولین موردی که در کار با فرم های وب و بررسی اعتبار محتوای فیلدها مورد نیاز است اطمینان از خالی نبودن مقادیر ارسالی از تگ های input است، بدین منظور ابتدا لازم است که یک تابع در جاوا اسکریپت داشته باشیم که در هنگام ارسال فرم خالی نبودن مقادیر value فیلدها را بررسی کند که در نمونه کد زیر تابع فرضی با نام دلخواه checkFormValidation را نوشته ایم:

<script>
function checkFormValidation(form_name, input_name){
    var input = document.forms[form_name][input_name].value;
    
    if(input === null || input === ""){
        alert("فیلد نام نباید خالی باشد");
        return false;
    }
}
</script>

توضیح:
- با فراخوانی تابع در رویداد onsubmit (زمانی که بر روی دکمه ارسال کلیک می شود) ابتدا با متد document.forms و value مقادیر فیلد فرضی با نام (پارامتر name) input-1 را از فرمی با نام form-1 دریافت می کنیم.
- سپس با دستور شرطی if بررسی می کنیم متغیر input که شامل مقادیر (پارامتر value) فیلد input-1 است خالی یا null نباشد.
- اگر فیلد خالی باشد نتیجه بررسی ما true شده و با دستور alert پیام هشداری به کاربر نمایش داده می شود، با return false نیز حالت پیش فرض مرورگر نادیده گرفته شده و از ارسال فرم جلوگیری می شود.
نکته: برای فیلد input-1 در حالت عادی پارامتر value در نظر نگرفته ایم (مقدار آن null است) اما با شروع تایپ در این فیلد پارامتر value به صورت خودکار در HTML DOM (مخفف Document Object Model)  مقداردهی شده و در دسترس قرار می گیرد، برای اطلاعات بیشتر می توانیم دکمه F12 را در مرورگرهای مختلف فشرده و از قسمت Inspector سورس کد زنده صفحه را بررسی کنیم، هرچند این پارامتر با این شیوه قابل روئیت نیست اما در سورس ریشه صفحه وجود دارد.
تابع بالا را می توانیم در هنگام ارسال فرم های صفحات HTML به شکل نمونه زیر فراخوانی کنیم:

<form name="form-1" action="#" method="post" onsubmit="return checkFormValidation('form-1', 'input-1');">
<label for="input-1">نام:</label>
<input name="input-1" id="input-1" type="text" dir="rtl" placeholder="نام خود را وارد کنید">
<input type="submit" value="ارسال">
</form>

پیش نمایش مثال ها را می توانیم در انتهای این صفحه به صورت آنلاین بررسی کنیم.
توضیح:
- همانطور که گفتیم عبارت form-1 در واقع نام فرم و input-1 عنوان فیلد متنی مورد نظر است که از پارامتر name آنها بدست می آید.
- برای ارسال پارامترهای مورد نیاز تابع آنها را به صورت آرگیومنت تنظیم و در هنگام فراخوانی ارسال می کنیم که این کار در نمونه کد بالا با دو آرگیومنت form_name, input_name انجام شده است.
- رویدادی که برای فراخوانی تابع جاوا اسکریپتی استفاده کرده ایم onsubmit است که آن را به تگ form نسبت داده ایم.
- این نوع اعتبارسنجی تنها در صورتی عمل می کند که در فرم HTML از دکمه با نوع submit برای ارسال فرم استفاده شود که در غالب موارد همین طور است.

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

یک شیوه دیگر اعتبارسنجی فرم های وب که می توانیم همزمان با پر کردن فیلدها و تکمیل فرم توسط کاربر از آن استفاده کنیم فراخوانی تابع جاوا اسکریپتی با رویدادهایی مانند onblur است، رویداد onblur زمانی اتفاق می افتد که کاربر ابتدا در فیلد کلیک یا به اصطلاح focus کرده سپس در فیلدی دیگر یا در فضای خالی صفحه کلیک می کند و در این حالت رویداد onblur رخ می دهد، از متد innerHTML نیز برای مقداردهی یک پیام در بلاک div با id مشخص یا دریافت مقادیر از آن استفاده می کنیم، برای نمونه
تابع جاوا اسکریپتی checkEmpty را به همراه فرم HTML شامل دو فیلد فرضی نام و نام خانوادگی کدنویسی کرده ایم:

<script>
function checkEmpty(input_id, div_id){
    if(input_id === 'input-2' && document.getElementById('input-2').value === ''){
        document.getElementById(div_id).innerHTML = 'لطفا نام خود را وارد کنید!';
        return false;
    } else {
        document.getElementById(div_id).innerHTML = '';
    }
    
    if(input_id === 'input-3' && document.getElementById('input-3').value === ''){
        document.getElementById(div_id).innerHTML = 'لطفا نام خانوادگی خود را وارد کنید!';
        return false;
    } else {
        document.getElementById(div_id).innerHTML = '';
    }
    
    return true;
}
</script>
<form name="form-2" action="#" method="post">
<label for="input-2">نام:</label>
<input name="input-2" id="input-2" type="text" dir="rtl" placeholder="نام خود را وارد کنید" onblur="checkEmpty(this.id, 'name-error');">
<div id="name-error" class="error"></div>
<br>
<label for="input-3">نام خانوادگی:</label>
<input name="input-3" id="input-3" type="text" dir="rtl" placeholder="نام خانوادگی خود را وارد کنید" onblur="checkEmpty(this.id, 'family-error');">
<div id="family-error" class="error"></div>
</form>

توضیح:
- در فرم فرضی بالا دو فیلد با نام های (پارامتر name) input-2 و input-3 داریم که برای هر کدام از آنها با اجرای رویداد onblur تابع checkEmpty را فراخوانی می کنیم.
- تابع checkEmpty با دو آرگیومنت input_id, div_id تعریف شده است که به ترتیب آی دی فیلد متنی input و آی دی بلاک div نمایش دهنده پیام خطا را شامل می شود.
- عبارت this.id آی دی تگ input (فیلد متنی) را به عنوان آرگیومنت تابع دریافت و تنظیم می کند، this در برنامه نویسی شی گراء به عنوان کلیدواژه آبجکت کاربرد داشته و در اینجا اشاره به آبجکت فیلد متنی دارد.
- دو بلاک div با id فرضی name-error و family-error را برای نمایش پیام خطا در کدها تنظیم کرده ایم که به هنگام فراخوانی تابع checkEmpty اگر مقادیر فیلدها خالی باشد، پیام مورد نظرمان را در بلاک ها نمایش می دهند، برای سفارشی سازی نحوه نمایش خطاها می توانیم در استایل CSS برای کلاس error خاصیت های دلخواه تعریف کنیم، به طور مثال:

<style>
.error {
    width: 300px;
    color: #FF0600;
}
</style>

- قسمت های return در تابع checkEmpty ضروری نیست و صرفا جهت اطلاع و استفاده های بعدی درج شده است.

اعتبارسنجی فیلد آدرس ایمیل با عبارات باقاعده

قدرت زبان جاوا اسکریپت این اجازه را به ما می دهد که تقریبا هر آنچه بخواهیم در سمت کاربر اعتبارسنجی کنیم، یکی از پرکاربردترین این موارد اعتبارسنجی فیلد مربوط به آدرس ایمیل است که معمولا برخی کاربران این فیلد را به طور صحیح تکمیل نمی کنند، تابع زیر در زمان ارسال فرم مقادیر موجود در فیلد ایمیل را با الگوی از پیش تعریف شده که با دستورات عبارات باقاعده (Regular Expressions) نوشته شده است تطبیق داده و در صورت مغایرت پیام هشدار نمایش می دهد:

<script>
function emailValidator(form_name, input_name) {
    var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    var address = document.forms[form_name].elements[input_name].value;
    
    if(pattern.test(address) === false) {
        alert('آدرس ایمیل وارد شده نامعتبر است');
        return false;
    }
    
    return true;
}
</script>
<form name="form-3" action="#" method="post" onsubmit="return emailValidator('form-3', 'input-4');">
<label for="input-4">آدرس ایمیل:</label>
<input name="input-4" id="input-4" type="text" dir="ltr" placeholder="ایمیل خود را وارد کنید">
<input type="submit" value="ارسال">
</form>

پیش نمایش آنلاین کد در انتهای این مطلب درج شده است.
توضیح:
- تابع بالا مبتنی بر دو عنصر کلیدی است، یکی استفاده از عبارات با قاعده (Regular Expressions) و دوم استفاده از متد test در جاوا اسکریپت.
- با استفاده از عبارات با قاعده الگوی مورد انتظارمان را برای آدرس های ایمیل در متغیر فرضی pattern تعریف می کنیم، در اینجا الگوی آدرس ایمیل در حالت معمول به صورت زیر است:
شروع رشته باید با حروف انگلیسی یا کاراکترهای (- _ .) باشد، در ادامه علامت @ بیاید سپس حروف انگلیسی و کاراکترهای (- _ .) مجاز است، در ادامه کاراکتر نقطه (.) درج شده باشد و در نهایت حروف انگلیسی به تعداد حداقل 2 و حداکثر 4 کاراکتر داشته باشیم (بزرگ و کوچک بودن حروف در الگو مهم نیست).
سپس با متد test بررسی می کنیم که آیا مقادیر فیلد ایمیل با الگوی مورد انتظارمان تطابق دارد یا خیر، اگر جواب منفی باشد متد test مقادیر false را برمی گرداند و در نتیجه قسمت داخل دستور شرطی if اجرا شده و پیام هشدار نمایش داده می شود، همانطور که قبلا گفتیم return false نیز مانع رفتار پیش فرض مرورگر شده و فرم ارسال نخواهد شد.
- نکته حائز اهمیت نحوه تنظیم و فراخوانی صحیح تابع emailValidator است، باید به یاد داشته باشیم که در هنگام فراخوانی تابع مقادیر پارامتر name فرم و فیلد مورد نظر را داخل علامت های '' یا "" قرار دهیم در غیر اینصورت کد به درستی عمل نخواهد کرد.

اعتبارسنجی وجود حروف و اعداد خاص با متد indexOf

روش دیگر اعتبارسنجی مقادیر وارد شده توسط کاربر در فیلدها بررسی وجود حروف و کاراکترهای خاص است، به فرض اگر قرار باشد که در فیلدهای فرم تنها از اعداد یا تنها از حروف خاصی استفاده شود این نوع اعتبارسنجی کاربرد خواهد داشت، به طور مثال در نمونه کد زیر تنها استفاده از حروف ABCDEF مجاز است:

<script>
function checkChar(form_name, input_name){
    var chars = 'ABCDEF';
    var string = document.forms[form_name].elements[input_name].value;
    var strlen = string.length;
    
    if(strlen < 1){
        alert('لطفا یک عبارت وارد کنید');
        return false;
    }
    
    string = string.toUpperCase();
    for(i = 0; i < strlen; i++){
        if(chars.indexOf(string.charAt(i)) < 0){
            alert("تنها کارکترهای A, B, C, D, E, F مجاز هستند");
            return false;
        }
    }
    
    alert('فرم شما ارسال شد');
    return true;
}
</script>
<form name="form-4" action="#" method="post" onsubmit="return checkChar('form-4', 'input-5');">
<label for="input-5">کاراکترها:</label>
<input name="input-5" id="input-5" type="text" dir="ltr" placeholder="چند کاراکتر وارد کنید">
<input type="submit" value="ارسال">
</form>

توضیح:
- در تابع checkChar ابتدا کاراکترهای مجاز را در متغیر chars تعریف می کنیم.
- سپس با متد document.forms مقادیر (value) فیلد تنظیم شده از آرگیومنت input_name را دریافت می کنیم.
- در متغیر strlen با استفاده از خاصیت length طول مقادیر وارد شده در فیلد را بدست می آوریم، اگر این اندازه کوچکتر از 1 باشد یعنی کاربر قصد ارسال فرم خالی را دارد و در نتیجه به همراه تنظیم return false (جلوگیری از ارسال فرم) با alert پیام هشداری نمایش می دهیم.
- در غیر این صورت مقادیر متغیر string که در واقع همان محتوای دریافتی از فیلد input-5 فرم است را با تابع درونی toUpperCase به حروف بزرگ تبدیل می کنیم (این کار برای نادیده گرفتن حساسیت بررسی های بعدی به بزرگ و کوچک بودن حروف انگلیسی است).
- بخش پایانی تابع نقش کلیدی در عملکرد آن دارد، با حلقه for به تعداد اندازه طول رشته ورودی کاربر تک تک حروف ارسالی رشته را با مقادیر chars مقایسه می کنیم، اگر حرف جاری در الگوی ما وجود نداشته باشد پیام هشداری به کاربر نمایش داده خواهد شد.
- تطبیق وجود کاراکترهای ارسالی با الگوی تعریف شده با متد indexOf و charAt انجام می شود، indexOf در واقع یک عدد را با توجه به جستجوی وجود موقعیت کاراکتر یا عبارت در الگوی مد نظر برمی گرداند، منظور از موقعیت این است که ببینیم کاراکتر یا عبارت مورد نظر ما چندمین کاراکتر یا حرف از الگوی تعیین شده است (شمارش indexOf از صفر شروع شده و شامل فواصل خالی هم می شود)، در صورتی که کاراکتر در الگو وجود نداشته باشد نتیجه 1- خواهد بود، به طور مثال:

<script>
var string = "welcome to javascript learning.";
var check = string.indexOf("javascript");
document.write(check);
</script>

نمونه کد بالا عدد 11 را در خروجی چاپ می کند چون عبارت javascript را جهت بررسی برای متغیر check و متد string.indexOf در نظر گرفته ایم، با دقت در رشته welcome to javascript learning نتیجه می گیریم که پیش از عبارت javascript با احتساب فواصل خالی و شمارش از صفر 10 کاراکتر وجود دارد، اگر به فرض در رشته ارسالی دو عبارت هم تحت عنوان javascript باشد متد indexOf با تطبیق اولین الگو نتیجه را برمی گرداند و به ادامه رشته ترتیب اثر نمی دهد، اگر هیچ کاراکتری تطبیق داده نشود indexOf عدد 1- را برمی گرداند.
متد charAt نیز با توجه به عددی که به عنوان آرگیومنت آن در نظر می گیریم از ابتدای رشته شمارش را به تعداد مقادیر شروع کرده و کاراکتر نهایی را به عنوان نتیجه برمی گرداند، شمارش charAt نیز از صفر شروع شده و شامل فواصل خالی نیز می شود به فرض مثال زیر حرف j را در خروجی چاپ می کند:

<script>
var string = "welcome to javascript learning.";
var check = string.charAt(11);
document.write(check);
</script>

حرف j یازدهمین کاراکتر در رشته مورد بررسی است.

اعتبارسنجی وجود حروف فارسی با عبارات باقاعده

معمولا در زبان های برنامه نویسی برای رسیدن به یک هدف و تبدیل ایده ذهنی به برنامه قابل اجرا متدها و روش های مختلفی در دسترس است، اینکه از بین این روش ها کدام حالت را انتخاب کنیم عموما بستگی به میزان سازگاری متدها با پلتفرم ها و نسخه های مختلف، هر چه کوتاهتر بودن راه حل ها، پیچیدگی الگوریتم مد نظر و حتی گاهی سلیقه برنامه نویس دارد، در خصوص اعتبارسنجی وجود حروف و اعداد خاص در رشته ارسالی نیز این مبحث صدق می کند و همان طور که ملاحظه شد با متد indexOf می توانیم این کار را به سادگی انجام دهیم، در حالت پیشرفته تر مشابه آنچه در خصوص آدرس های ایمیل دیدیم این نوع اعتبارسنجی با دستورات عبارات با قاعده (Regular Expressions) نیز ممکن است که در ادامه با ذکر یک مثال این روش را بررسی می کنیم:

<script>
function checkChar(form_name, input_name){
    var pattern = /^([آ-ی])+$/u;
    var string = document.forms[form_name].elements[input_name].value;
    
    if(pattern.test(string) === false) {
        alert('مقادیر وارد شده نامعتبر است');
        return false;
    }
    
    return true;
}
</script>
<form name="form-5" action="#" method="post" onsubmit="return checkChar('form-5', 'input-6');">
<label for="input-6">عبارت فارسی:</label>
<input name="input-6" id="input-6" type="text" dir="rtl" placeholder="یک عبارت فارسی وارد کنید">
<input type="submit" value="ارسال">
</form>

در نمونه کد بالا صرفا اجازه درج حروف فارسی در فیلد input-6 به کاربر داده شده است، مبنای این کد دستورات عبارات باقاعده و Modifier u است، از u برای سازگاری کاراکترهای UTF-8 Unicode در دستورات Regex استفاده می شود.
برای حروف انگلیسی کافی است قسمت pattern را به شکل زیر تغییر دهیم:

var pattern = /^([A-Za-z])+$/u;

درج u در این حالت اختیاری است.

اعتبارسنجی تعداد حروف مجاز در هنگام پر کردن فیلد

تابع دیگری که در پایان این مطلب قصد بررسی آن را داریم ساده اما کاربردی است، در این روش اعتبارسنجی حین تایپ کاربر تعداد حروف مجاز باقیمانده در قسمتی از صفحه نمایش داده می شود، به فرض اگر حداکثر کاراکتر مجاز در یک فیلد 100 مورد باشد با افزودن هر کاراکتر به فیلد مورد نظر به صورت معکوس مقدار کاراکتر باقیمانده در بلاک div یا هر عنصر مورد نظر دیگری چاپ می شود، به طور مثال این شیوه اعتبارسنجی فیلدها در هنگام پر کردن فیلد textarea در نمونه کد زیر استفاده شده است:

<script>
function countChars(textarea_id, div_id) {
    var max = 10;
    var count = max - document.getElementById(textarea_id).value.length;
    var text = 'تعداد کاراکتر باقیمانده: ';
    
    if(count < 0) {
        document.getElementById(div_id).innerHTML = text + '<span style="color: red;">' + count + '</span>';
    } else {
        document.getElementById(div_id).innerHTML = text + count;
    }
}
</script>
<form id="form-6" action="#" method="post">
<textarea name="usertext" id="usertext" rows="6" cols="50" onfocus="countChars('usertext', 'result')" onkeydown="countChars('usertext', 'result')" onkeyup="countChars('usertext', 'result')">
</textarea>
<div id="result"></div>
</form>

توضیح:
- در این نمونه کد در تابع countChars از متدهای پرکاربرد getElementById، length و innerHTML استفاده شده است.
- با هر بار فراخوانی تابع (با رویدادهای onfocus, onkeyup و onkeydown) مقادیر از فیلد فرضی usertext دریافت و طول رشته کاراکترها با متد length سنجیده می شود، اگر مقدار متغیر max که حداکثر سقف مجاز کاراکترها است را از میزان کاراکتر فعلی که کاربر در فیلد وارد کرده است کم کنیم و حاصل کوچکتر از صفر باشد، نتیجه به رنگ قرمز در بلاک div نمایش داده می شود (با استفاده از تگ span و style خطی).
- در مثال بالا فیلد از نوع textarea است و با سه رویداد onfocus, onkeyup و onkeydown تابع را فراخوانی می کنیم، یعنی هنگامی که کاربر جهت تایپ یا ویرایش نوشته ها در فیلد کلیک می کند، هنگامی که دکمه ای از صفحه کلید را فشار داده یا دکمه را رها می کند.

کد و پیش نمایش آنلاین

کد و پیش نمایش آنلاین مثال هایی که در این آموزش بررسی کردیم را می توانیم در ادامه جهت تجمیع مبحث و یادآوری مرور کنیم:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | اعتبارسنجی فرم های HTML با JavaScript</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
    font-size: 12px;
}
.error {
    display: block;
    padding: 4px;
    color: #C00;
}
</style>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!<br>
</noscript>
بررسی خالی نبودن فیلدهای فرم در هنگام ارسال (بدون پر کردن فیلد زیر بر روی دکمه ارسال کلیک کنید).
<br>
<br>
<script>
function checkFormValidation(form_name, input_name){
    var input = document.forms[form_name][input_name].value;
    
    if(input === null || input === ""){
        alert("فیلد نام نباید خالی باشد");
        return false;
    }
}
</script>
<form name="form-1" action="#" method="post" onsubmit="return checkFormValidation('form-1', 'input-1');">
<label for="input-1">نام:</label>
<input name="input-1" id="input-1" type="text" dir="rtl" placeholder="نام خود را وارد کنید">
<input type="submit" value="ارسال">
</form>
<hr>
<br>
بررسی خالی نبودن فیلدها در زمان تکمیل فرم (ابتدا در یک فیلد کلیک کرده و بدون پر کردن آن در فیلد بعدی کلیک کنید).
<br>
<br>
<script>
function checkEmpty(input_id, div_id){
    if(input_id === 'input-2' && document.getElementById('input-2').value === ''){
        document.getElementById(div_id).innerHTML = 'لطفا نام خود را وارد کنید!';
        return false;
    } else {
        document.getElementById(div_id).innerHTML = '';
    }
    
    if(input_id === 'input-3' && document.getElementById('input-3').value === ''){
        document.getElementById(div_id).innerHTML = 'لطفا نام خانوادگی خود را وارد کنید!';
        return false;
    } else {
        document.getElementById(div_id).innerHTML = '';
    }
    
    return true;
}
</script>
<form name="form-2" action="#" method="post">
<label for="input-2">نام:</label>
<input name="input-2" id="input-2" type="text" dir="rtl" placeholder="نام خود را وارد کنید" onblur="checkEmpty(this.id, 'name-error');">
<div id="name-error" class="error"></div>
<br>
<label for="input-3">نام خانوادگی:</label>
<input name="input-3" id="input-3" type="text" dir="rtl" placeholder="نام خانوادگی خود را وارد کنید" onblur="checkEmpty(this.id, 'family-error');">
<div id="family-error" class="error"></div>
</form>
<hr>
<br>
اعتبارسنجی فیلد آدرس ایمیل با عبارات باقاعده (یک ایمیل نامعتبر در فیلد زیر وارد کرده و سپس بر روی دکمه ارسال کلیک کنید).
<br>
<br>
<script>
function emailValidator(form_name, input_name) {
    var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    var address = document.forms[form_name].elements[input_name].value;
    
    if(pattern.test(address) === false) {
        alert('آدرس ایمیل وارد شده نامعتبر است');
        return false;
    }
    
    return true;
}
</script>
<form name="form-3" action="#" method="post" onsubmit="return emailValidator('form-3', 'input-4');">
<label for="input-4">آدرس ایمیل:</label>
<input name="input-4" id="input-4" type="text" dir="ltr" placeholder="ایمیل خود را وارد کنید">
<input type="submit" value="ارسال">
</form>
<hr>
<br>
اعتبارسنجی وجود حروف و اعداد خاص با متد indexOf (برای بررسی مثال زیر یک عبارت با استفاده از کاراکترهایی به جز حروف A, B, C, D, E, F در فیلد مورد نظر وارد کنید).
<br>
<br>
<script>
function checkChar(form_name, input_name){
    var chars = 'ABCDEF';
    var string = document.forms[form_name].elements[input_name].value;
    var strlen = string.length;
    
    if(strlen < 1){
        alert('لطفا یک عبارت وارد کنید');
        return false;
    }
    
    string = string.toUpperCase();
    for(i = 0; i < strlen; i++){
        if(chars.indexOf(string.charAt(i)) < 0){
            alert("تنها کارکترهای A, B, C, D, E, F مجاز هستند");
            return false;
        }
    }
    
    alert('فرم شما ارسال شد');
    return true;
}
</script>
<form name="form-4" action="#" method="post" onsubmit="return checkChar('form-4', 'input-5');">
<label for="input-5">کاراکترها:</label>
<input name="input-5" id="input-5" type="text" dir="ltr" placeholder="چند کاراکتر وارد کنید">
<input type="submit" value="ارسال">
</form>
<hr>
<br>
اعتبارسنجی وجود حروف فارسی با عبارات باقاعده (برای بررسی مثال زیر یک عبارت با استفاده از کاراکترهایی به جز حروف زبان فارسی در فیلد مورد نظر وارد کنید).
<br>
<br>
<script>
function checkChar(form_name, input_name){
    var pattern = /^([آ-ی])+$/u;
    var string = document.forms[form_name].elements[input_name].value;
    
    if(pattern.test(string) === false) {
        alert('مقادیر وارد شده نامعتبر است');
        return false;
    }
    
    return true;
}
</script>
<form name="form-5" action="#" method="post" onsubmit="return checkChar('form-5', 'input-6');">
<label for="input-6">عبارت فارسی:</label>
<input name="input-6" id="input-6" type="text" dir="rtl" placeholder="یک عبارت فارسی وارد کنید">
<input type="submit" value="ارسال">
</form>
<hr>
<br>
اعتبارسنجی تعداد حروف مجاز در هنگام پر کردن فیلد (برای بررسی مثال زیر عبارتی دلخواه را در محدوده textarea بنویسید).
<br>
<br>
<script>
function countChars(textarea_id, div_id) {
    var max = 10;
    var count = max - document.getElementById(textarea_id).value.length;
    var text = 'تعداد کاراکتر باقیمانده: ';
    
    if(count < 0) {
        document.getElementById(div_id).innerHTML = text + '<span style="color: red;">' + count + '</span>';
    } else {
        document.getElementById(div_id).innerHTML = text + count;
    }
}
</script>
<form id="form-6" action="#" method="post">
<textarea name="usertext" id="usertext" rows="6" cols="50" onfocus="countChars('usertext', 'result')" onkeydown="countChars('usertext', 'result')" onkeyup="countChars('usertext', 'result')">
</textarea>
<div id="result"></div>
</form>
</body>
</html>

پیش نمایش آنلاین