JavaScript/טפסים

מתוך ויקיספר
< JavaScript(הופנה מהדף Javascript/טפסים)
קפיצה אל: ניווט, חיפוש
JavaScript

התחלת העבודה

הוראת תנאי

לולאות

מערכים

פונקציות

אובייקטים

JavaScript למתקדמים

ספריות


גרסה להדפסה

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

בדיקת טופס[עריכה]

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

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

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

<form method="post" action="process.php" 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 ( ) אנו בודקים אם קיים תוו מסוים כלומר אם האינדקס שלו גדול מ- 1- אז הוא קיים. שימו לב לצורה שבא פונים לאלמנט (שדה טקסט במקרה הזה) var un = element.username.value;.