לדלג לתוכן

JavaScript/טפסים

מתוך ויקיספר, אוסף הספרים והמדריכים החופשי
JavaScript

התחלת העבודה

הוראת תנאי

אובייקטים

מערכים

לולאות

פונקציות

אובייקט המסמך

אוביקטים נוספים

JavaScript למתקדמים

ספריות

בינה מלאכותית


גרסה להדפסה

רצוי לחזור תחילה על HTML/טפסים.

בדיקת טופס

[עריכה]

סביר להניח שפעמים רבות רציתם אבל לא ידעתם, איך בודקים אם המשתמש הכניס תוכן חוקי לשדות בטופס (from). הדרך בה נבדוק את הטופס תפתור לכם את הבעיות, אך לא את כולם - כי היא מתבססת על תכנות בצד לקוח (JavaScript). אין מנוס מעבודה בצד-שרת, ולכן דרושות גם שפות לצד זה (PHP, ASP, וכו'). חשוב לזכור כי תכנות בצד הלקוח אינו תמיד נתון לשליטת האתר, לדוגמה - המשתמש יכול לחסום Javascript. יתרה מכך, מדובר לא רק על נכונות הנתונים, אלא גם על בטיחות השרת. לכן, וידוא של נתונים בצד הלקוח אינו מספיק וחייב להתבצע גם בצד השרת.

נסביר את הרעיון מאחורי בדיקת הטופס, בדוגמא:

נפתח דף חדש, נקרא לו index.html ובתוכו -

<form method="post" action="" onsubmit="return validate( this )">
	<!-- Username input -->
    Username: <input type="text" name="username" id="username" maxlength="24" />
	<!-- Submit button -->
    <input type="submit" value="Submit" />
</form>

שימו לב לתכונת האירוע - התכונה onSubmit שעושה בדיוק את מה שמרומז בשמה - כאשר הטופס נשלח היא מחזירה בעזרת מילת המפתח return את הנתונים לפונקציה שנקראת validate ( ) בעזרת מילת המפתח this (לא חובה). אפשר לומר שזהו חלק אינטגרלי מהתהליך של בדיקת הטופס. למעשה, אם תחסירו אחת ממילות המפתח, JavaScript תזעיק טעות כללית.

לסיכום שלב א' - בניית טופס ב-HTML ובתוכו לקרוא לפונקציה בעזרת onSubmit.

  • שלב ב' - כעת יש לתכנן את הפונקציה validate ( ) ובתוכה בדיקת הטופס.

למי שאין ידע בסיסי בפונקציות מוצע לחזור אחורה למחלקת הפונקציות.

בקטע הקוד הבא, פונקציה בשם validate מקבלת ארגומנט (ערך) מהטופס שבנינו בשלב קודם. על ידי המילה this אנו שולחים את כל האלמנטים בטופס (שדות, כפתורי בחירה ורדיו, ועוד'):

<script type="text/javascript">
  function validate( element ) {
  // ... Statements ...
  }
</script>

כעת נוכל לפנות לכל אלמנט בטופס בעזרת הארגומנט element, שמקבל את הערכים ששלחנו בעזרת מילת המפתח this. מכאן - הכל תלוי בכם. ניתן לערוך, לחתוך ולבדוק כל מחרוזת שמתקבלת דרך הטופס, לדוגמה:

<script type="text/javascript">
  function validate( element ) {
    // Get element value ...
    var un = element.username.value;
    // Validate element's value ...
    if ( un == null || un == "" ) {
    alert("אנא הכנס ערך בשדה שם משתמש.");
    submit.username.focus(); 
    return false;
    }
    // Validate restricted characters ...
    if (un.indexOf("%")>-1 || un.indexOf("<")>-1 || un.indexOf(">")>-1 || un.indexOf("\\")>-1 || un.indexOf("/")>-1) {
    alert("שם המשתמש לא תקין.");
    submit.username.focus();
    return false;
    } 
  }
</script>

הפונקציה בודקת האם שם המשתמש (Username) מכיל תווים והאם יש תויים לא חוקיים כמו <, >, ', \, /, %. בעזרת הפונקציה indexOf ( ) אנו בודקים אם קיים תו מסוים כלומר אם האינדקס שלו גדול מ- אז הוא קיים. שימו לב לצורה שבא פונים לאלמנט (שדה טקסט במקרה הזה) var un = element.username.value;.