تأكيد النماذج Form Validation

تستخدم الجافاسكربت JavaScript للتأكد من صحة المعلومات في النماذج قبل ارسالها إلى السيرفر .

أنواع البيانات التي يمكن فحصها من خلال الجافاسكربت هي :

ترك المستخدم لحقل مطلوب فارغ .
ادخال المستخدم بريد الكتروني صحيح ام لأ.
ادخال المستخدم لتاريخ صحيح ام لأ .
ادخال المستخدم نص في حقل أرقام .

الحقول المطلوبة

يفحص الكود الوظيفي اذا ترك الحقل فارغاً أم لا . اذا كان الحقل فارغاً سيظهر صندوق تحذير بأن قيمة الكود الوظيفي خاطئة وبذلك لن يتم ارسال النموذج :

function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("يجب إدخال الاسم ");
return false;
}
}

سيتم استدعاء الكود عند الضغط على زر الارسال في النموذج التالي :

<form dir="rtl" name="myForm" action="get" onsubmit="return validateForm()" method="post">
الاسم : <input type="text" name="fname">
<input type="submit" value="إرسال">
</form>

المثال كاملاً :

function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("يجب إدخال الاسم ");
return false;
}
}
<form dir="rtl" name="myForm" action="get" 
onsubmit="return validateForm()" method="post">
الاسم : <input type="text" name="fname">
<input type="submit" value="إرسال">
</form>

فعالية البريد الالكتروني

يفحص الكود الوظيفي التالي عن المحتوى اذا كان يحمل تركيبة البريد ام لأ .

ذلك يعني بأن القيمة التي يجب أن تدخل يجب أن تحتوي على العلامة “@” وعلى الأقل نقطة واحدة “.” وأيضاً لايجب أن تكون الإشارة “@” أول حرف في البريد الالكتروني و النقطة “.” يجب أن تكون بعد الإشارة “@” مع حرفين على الأقل قبل نهاية البريد .

function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("البريد الالكتروني غير فعال");
return false;
}
}

سيتم استدعاء الكود الوظيفي من خلال النوذج التالي وعند الضغط على زر الارسال :

<form dir="rtl" name="myForm" action="get" onsubmit="return validateForm();" method="post">
البريد الالكتروني : <input type="text" name="email">
<input type="submit" value="إرسال">
</form>

مع جمع الكودين سيصبح الكود لدينا هو :

<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("البريد الالكتروني غير فعال");
return false;
}
}
</script>
<form dir="rtl" name="myForm" action="get" onsubmit="return validateForm();" method="post">
البريد الالكتروني : <input type="text" name="email">
<input type="submit" value="إرسال">
</form>