Javascript - שדות חובה בטופס

אחת הדרישות הבסיסיות ביותר בתכנון של טופס היא שנוכל להגדיר איזה שדות בטופס הם שדות חובה ואיזה שדות רשות. שפת HTML5 מאפשרת להגדיר בשדה מסוג <input> האם שדה הוא שדה חובה או לא (תוכלו לקרוא על כך במדריך לאימות נתונים בשדות קלט באתר זה). אולם, לא כל הדפדפנים ובוודאי שלא כל גרסאות הדפדפנים תומכים עדיין באפשרות זו ולכן אנו נדרשים לפיתרון מסוג אחר, כזה שמעורב בו קוד Javascript.

דוגמת קוד לפונקצית Javascript הבודקת האם המשתמש הזין נתונים לשדה שאותו נגדיר כשדה חובה

function CheckRequired(e, Msg) {
var x = e.value
if (x==null || x=="")
{
  alert(Msg);
  return false;
}
  return true
}

בקוד למעלה יצרנו פונקציה ששמה CheckRequired. פונקציה זו מקבלת שני פרמטרים: את השדה שעלינו לבדוק אם הוא מכיל ערך כלשהו ואת המסר למשתמש במקרה שהשדה אינו מכיל ערך. בתוך הפונקציה אנו יוצרים משתנה x המחזיק בתוכו את ערכו של השדה. לאחר מכן אנו בודקים אם ערך השדה הוא null או שהוא מחרוזת ריקה ובמקרה כזה נציג למשתמש הודעה שחובה עליו להזין ערך לשדה. הפונקציה תחזיר ערך false במקרה ששדה החובה אינו מכיל ערך כלשהו. במקרה שהמשתמש הזין ערך כלשהו לתוך השדה הפונקציה תחזיר true.

דוגמה לטופס HTML העושה שימוש בפונקציה שלנו לבדיקת שדות חובה

<form onsubmit="CheckRequired(document.getElementById('f1'), 'Please Enter a Value to the Required Field')">
Required Field: <input type="text" id="f1">
<input type='submit' value='Submit' />
</form>

בדוגמת הקוד למעלה יצרנו טופס HTML ובו שדה אחד וכפתור. לאירוע onsubmit של הטופס הצמדנו קריאה לפונקציה שלנו, תוך שאנו מעבירים לה את הפרמטרים הנדרשים, קרי השדה שבו עליה לטפל וההודעה שעליה להציג במקרה שהמשתמש לא הזין ערך בתוך השדה שבטופס.

דוגמה לדף HTML מלא המכיל את הטופס ואת הפונקציה לבדיקת שדה החובה

<html>
<head>
 <title>Required Field Demo with Javascript</title>
 <script type="text/javascript">
   function CheckRequired(e, Msg) {
   var x = e.value
   if (x==null || x=="")
   {
    alert(Msg);
    return false;
   }
   return true
  }
 </script>
</head>
<body>
 
<form onsubmit="CheckRequired(document.getElementById('f1'), 'Please Enter a Value to the Required Field')">
Required Field: <input type="text" id="f1">
<input type='submit' value='Submit' />
</form>

</body>
</html>

מאמרים נוספים בנושא זה

מדריך HTML5 לאימות נתונים בשדות קלט

מדריך לאירועים בשפת Javascript

 


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש