אימגו מגזין מאמרים

כתב עת בנושאי תרבות ותוכן

בדיקת טפסי HTML


תאריך פרסום קודם: 
05/07/2007
מחבר: 
ניסים עינת

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

איזה בדיקות נירצנ לעשות בדרך כלל?

בדיקה האם השדה ריק
בדיקה האם השדה מולא כראוי, כלומר במיקרה של מספר טלפון למשל – האם מולאו בדיוק 7 ספרות?
בדיקת שדה מייל או אתר – כאן נהיה מעוניינים לבצע בדיקה על מבנה הטקסט שהוגש, כלומר האם מופיע ה @ הנידרש וכו'.

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

השיטה השניה, היותר נכונה שתוצג כאן היא להשתמש באירוע onSubmit בתוך תג ה form.

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

טוב מספיק עם הדיבורים וניגש למעשים!
ראשית נציג את קוד ה-טופס:

כפי שניתן לראות הטופס הינו סטנדרטי לחלוטין למעט התוספת בתג הform, מה שמתרחש לאחר לחיצה על כפתור ה submit הוא שאירוע ה onsubmit מתעורר וקורא לפונקציה validate,
שימו לב שהקריאה נעשית בצורה של return, כלומר, אירוע ה onsubmit ממתין לערך שיוחז מהפונקציה validate, במידה והערך יהיה true, השליחה תתרחש כרגיל אך במידה והערך שיוחזר מפונקציית validate יהיה שלילי, שליחת הטופס תיעצר.

כעת נעבור אל פונקציית ה ולידציה:

function validate(){

if(!document. my_form.name.value){alert(‘אנא הכנס שם’);return false;}

if(!document. my_form.phone.value.match(/^\d{7}$/)){alert(‘מספר הטלפון לא הוזן כנדרש’);return false;}

if(!document. my_form.mail.value.match(/^.+@.$\..+$/)){alert(‘מספר הטלפון לא הוזן מייל לא הוזן כנידרש’);return false;}

return true;

}

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

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

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

במידה ושלושת התנאים לא התמלאו אזי הפונקציה תסתיים תוך כדי שהיא שולחת ערך true והטופס ישלח!

Add new comment

CAPTCHA

This question is for testing whether you are a human visitor and to prevent automated spam submissions.

Fill in the blank.

הנצפים ביותר

מאמרים נוספים מאת ניסים עינת

.