تأكيد النماذج في جافا سكربت

تأكيد النماذج 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>