JavaScript/טפסים: הבדלים בין גרסאות בדף
שורה 24: | שורה 24: | ||
'''שימו לב''' לתכונת האירוע - התכונה '''onSubmit''' שעושה בידיוק את מה שמרומז בשמה - כאשר הטופס נשלח היא '''מחזירה''' בעזרת מילת המפתח '''return''' את הנתונים לפונקציה שנקראת <span dir="ltr" style="direction: ltr;">'''validate ( )'''</span> בעזרת מילת המפתח '''this''',(לא חובה) אפשר לומר שזהו חלק אינטגרלי מהתהליך של בדיקת הטופס למעשה, אם תחסירו אחת ממילות המפתח, JavaScript תזעיק טעות כללית. |
'''שימו לב''' לתכונת האירוע - התכונה '''onSubmit''' שעושה בידיוק את מה שמרומז בשמה - כאשר הטופס נשלח היא '''מחזירה''' בעזרת מילת המפתח '''return''' את הנתונים לפונקציה שנקראת <span dir="ltr" style="direction: ltr;">'''validate ( )'''</span> בעזרת מילת המפתח '''this''',(לא חובה) אפשר לומר שזהו חלק אינטגרלי מהתהליך של בדיקת הטופס למעשה, אם תחסירו אחת ממילות המפתח, JavaScript תזעיק טעות כללית. |
||
'''לסיכום שלב א'''' - בניית טופס ב-HTML ובתוכו לקרוא |
'''לסיכום שלב א'''' - בניית טופס ב-HTML ובתוכו לקרוא לפונקציה בעזרת '''onSubmit'''. |
||
<ul> |
<ul> |
גרסה מ־12:01, 9 באוקטובר 2012
JavaScript |
---|
התחלת העבודה הוראת תנאי אובייקטים מערכים לולאות
פונקציות אובייקט המסמך אוביקטים נוספים JavaScript למתקדמים ספריות בינה מלאכותית |
רצוי לחזור תחילה על HTML/טפסים.
בדיקת טופס
סביר להניח שפעמים רבות רציתם אבל לא ידעתם, איך בודקים אם המשתמש הכניס תוכן חוקי לשדות בטופס (from). הדרך בה נבדוק את הטופס תפתור לכם את הבעיות, אך לא את כולם - כי היא מתבססת על תכנות בצד לקוח (JavaScript), כשתלמדו שפות צד-שרת (PHP, ASP, וכו'). חשוב לזכור כי תכנות בצד הלקוח אינו תמיד נתון לשליטת האתר, לדוגמה - המשתמש יכול לחסום Javascript. לכן, וידוא של נתונים בצד הלקוח אינו מספיק וחייב להתבצע גם בצד השרת.
נסביר את הרעיון מאחורי בדיקת הטופס, בדוגמא:
- שלב א' - תחילה יש לבנות טופס, HTML/טפסים.
נפתח דף חדש, נקרא לו 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 ( ) אנו בודקים אם קיים תוו מסוים כלומר אם האינדקס שלו גדול מ- אז הוא קיים. שימו לב לצורה שבא פונים לאלמנט (שדה טקסט במקרה הזה) var un = element.username.value;.