تطبيق على درس النماذج + إستخدام Javascript

هذا الدرس تطبيق للدرس السابق حول تنسيق النماذج ، ولكن سيكون عملي أكثر بشفرة HTML و CSS وأيضاً إستخدام Javascript في إضافة ميزتين للنموذج ، وهما ملاحطة حول الحقول المهمة بمجرد الضغط على الحقل (بإستخدام الحدث onFocus و onBlur ) وأيضاً التأكد من الحقول المهمة التي نسقناها ، درس سأحاول شرح النقاط المهمة فيه مع وجود مثال قبل قراءة الدرس وإن أعجبك تستطيع أيضاً تحميل ملف الدرس.

• مثال على الدرس
• تحميل الأمثلة

في البداية نبدأ بصفحة HTML ، ثم بكتابة النموذج الذي نريده ، لدينا مثلاً أربع نماذج لعملية تسجيل بسيطة تتكون من إسم المستخدم ، البريد الإلكتروني ، كلمة المرور ، تأكيد كلمة المرور ، ستكون الشفرة بهذه الطريقة كما تعلمناها قبل (راجع درس كتابة النماذج في XHTML - الجزء الأول ، وأيضاً تنسيق نماذج بإستخدام CSS) ، ألقي نظرة على شفرة HTML بسيطة وسبق شرحها:

   


       
نموذج تسجيل

       
أكمل النموذج التالي لإتمام عملية التسجيل:

       إسم المستخدم
       
       يجب كتابة إسم المستخدم ، لا تقل عن 4 ولا تزيد عن 32 حرف.

       كلمة المرور
       
       يجب كتابة كلمة المرور ، لا تقل عن 8 حروف ولا تزيد عن 20.

       تأكيد كلمة المرور
       
       يجب تأكيد كلمة المرورتأكيد كلمة المرور ، مماثلة لكلمة المرور السابقة.

       البريد الإلكتروني
       
       يجب كتابة البريد الإلكتروني الصحيح

       تسجيل
       

   

الآن ستلاحظ وجود خواص إضافية في وسم input ، وهم onFocus و onBlur وهم أحد خواص التي تستخدم في التأثير على أي عنصر من عناصر HTML بإستخدام Javascript ، الحدث الأول onFocus تستخدم في حال إنتقل إلى الحقل بالضغط عليه ، والحدث الثاني onBlur تستخدم في حال إنتقل إلى حقل آخر أو غادر الحقل بشكل عام.

أما بالنسبة لتنسيق CSS ، هذه شفرتها ، ملاحظة وهي أن الألوان والخطوط المستخدمة والمسافات حسب تنسيقي كما يناسبني ، غيرها مثل ما تريد أو إنسخ الشفرة فقط (راجع تنسيق النموذج):

div { margin: 0 auto; padding: 10px; width: 660px; background: #fdfdfd; border: 1px solid #9b9b9b; }

legend { margin: 0 0 10px; color: #871d28; font: bold 25px Arial, Helvetica, sans-serif; }
label {
 margin: 4px 1px;
 padding: 1px 0 0 5px;
 float: right;
 display: block;
 width: 130px;
 text-align: left;
 font: bold 14px "simplified Arabic";
}
input.text {
 margin: 4px 1px;
 padding: 1px;
 width: 150px;
 border: 1px solid #bdbdbd;
 font: bold 14px "simplified Arabic";
}
input#submit {
 margin:5px 0;
 width:70px;
 height: 24px;
 border: 1px solid #d6d6d6;
 -moz-border-radius: 7px;
 background-image: url(submit.gif);
 background-repeat: repeat-x;
 background-position: top;
 font: bold 14px Arial, Helvetica, sans-serif;
 color: #333333;
 display: block;
}
span#important-1 , span#important-2 , span#important-3 , span#important-4 {
 margin: 0;
 padding: 1px 4px 4px;
 width: 340px;
 height: 20px;
 display: inline-block;
 background: #f0f0f0;
 border: 1px solid #bdbdbd;
 font: bold 14px "simplified Arabic";
 visibility: hidden;
}

بعد ذلك نضيف شفرة Javascript داخل العنصر head الذي يحتوي إسم الصفحة و شفرة CSS وأشياء أخرى ، سأشرح ما قمت به عبر النقاط التي تلي الشفرة هذه:

function msgToField(idElement) {
 var element = document.getElementById(idElement);
 if(element.style.visibility!='visible') {
  element.style.visibility='visible';
 } else {
  element.style.visibility='hidden';
 }
}

• إنشاء دالة بإسم msgToField ويحتوي على متغير بإسم idElement لإستخدامه في تحديد الكلاسات المستخدمة في خاصية id.
• إنشاء متغير لتحديد عنصر يستخدم خاصية id ، يمكنك أيضاً إستخدام “document.getElementsByClassName” للخاصية class وغيرها من خصائص dom.
• التحقق إذا كان العنصر الذي سنحدده لا يحتوي على قيمة visible من خاصية visibility في CSS فسيكون قيمته visible ، إذا لم يتحقق الشرط تكون الخاصية visibility تُحدد على قيمة hidden.

الآن نأتي إلى التحقق من أن الحقول فارغة أم لا ، وأيضاً التحقق من أن كلمة المرور تتوافق مع حقل تأكيد كلمة المرور أم لا ، عبر شفرة javascript:

function validateForm () {
 valid = true;
 var userElement = document.getElementsByTagName("input");
 if(userElement[0].value == "") {
  alert("الرجاء كتابة إسم المستخدم");
  valid = false;
 } else if (userElement[0].value > 4 || userElement[0].value < 32) {
  alert("تأكد من عدد حروف إسم المستخدم");
  valid = false;
 } else if (userElement[1].value == "") {
  alert("الرجاء كتابة كلمة المرور");
  valid = false;
 } else if (userElement[2].value == "") {
  alert("الرجاء كتابة تأكيد كلمة المرور");
  valid = false;
 } else if (userElement[3].value == "") {
  alert("الرجاء كتابة البريد الإلكتروني");
  valid = false;
 } else if (userElement[2].value != userElement[1].value) {
  alert("كلمة المرور الآخيرة التي كتبتها غير متطابقة مع كلمة المرور الأولى");
  valid = false;
 }

 return valid;
}

ملاحظات على الشفرة:

• إنشاء دالة بإسم validateForm ، وتعيين متغير valid بقيمة true. (يعني صحيح)
• تحديد الوسم input عن طريق المتغير userElement.
• التحقق ما إذا كانت الحقول فارغة ، نتحقق لكل حقل ، وأيضاً يتم تحديدها على شكل مصفوفات userElement[0] ، userElement[1] ، userElement .. إلى العدد الحقول التي تريدها ، ..
• إذا كان الحقل فارغ فستظهر له عبارة خطأ مع تحديد المتغير valid على القيمة false.
• قيمة المتغير valid هي التي ستحدد مرور النموذج إلى الصفحة التي بعدها أم لا.

نضيف بداخل الوسم form الحدث onSubmit وأضفناها سابقاً فقط للتذكير:

إنتهى كل شيء! هناك ملاحظة في حال وضعت خاصية visibility التابعة لتقنية CSS ضمن وسم span ، غير شفرة Javascript إلى هذه الشفرة:

function msgToField(idElement) {
 var element = document.getElementById(idElement);
 if(element.style.visibility!='hidden') {
  element.style.visibility='hidden';
 } else {
  element.style.visibility='visible';
 }
}

فقط تغيير بدلاً من التأكد من تحديد قيمة hidden بدلاً من visible ، لأن التأثير في النموذج لن يدخل بشكل صحيح ، ستظهر لك مشكلة عند التطبيق أو ضع خاصية visiblity ضمن ملف css أو ضمن العنصر head مع إستخدام الشفرة السابقة التي إستخدمناها.

طريقة أخرى للنموذج

يمكننا عرض طريقة أخرى وهنا سنجري تعديل على طريقة التأكد من عدم خلو الحقول المطلوبة فبدلاً من إستخدام التنبية في كل مرة عن طريق Alert ولكن هذه المرة عن طريق عنصر سنقوم بإشائه بجانب كل حقل بواسطة الوسم span يظهر فقط عن ترك الحقول فارغة وفي نفس الوقت تغيير لون وصف الحقول وحدود الحقول أيضاً إضافة للتنبيهات وفي حال كتابة الحقول وتحقيق الشرط الذي نريده سترجع الأمور كما كانت لكل حقل من الحقول.

كما ترون تستطيع رؤية مثال حي عليه ، وأيضاً شفرة Javscript سهلة لن تحتاج إلى تحديد كل حقل بواسطة “document.getElementsByTags” أو “document.getElementById” أو حتى بإستخدام الكلاس ، كل ما في الأمر هو تحديد أماكن العناصر عن طريق إنشاء متغيرات خاصة فيها وإستخدامها في حلقة تكرار for مرة واحدة بهذه الطريقة:

function validateForm () {
 valid = true;
 var inputElement = document.getElementById("register").getElementsByTagName("input");
 var labelElement = document.getElementById("register").getElementsByTagName("label");
 var spanElement = document.getElementById("register").getElementsByTagName("span");
 for (i=0; i < 4; i++) {
  if(inputElement[i].value == "") {
   inputElement[i].style.border = "1px solid red";
   labelElement[i].style.color = "red";
   spanElement[i].style.visibility = "visible";
   valid = false;
  } else {
   inputElement[i].style.border = "1px solid #bdbdbd";
   labelElement[i].style.color = "#000";
   spanElement[i].style.visibility = "hidden";
  }
 }

  if(inputElement.password.value != inputElement.passwordConfirm.value) {
   alert("الرجاء التحقق من تساوي الحقول الخاصة بكلمة المرور");
   valid = false;
  }
 return valid;
}

ستجدون التنسيق CSS مع المثال أو مع الأمثلة المرفقة