JS Validation Function Integrated With ASP.NET Validators

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

וולידציה יעילה מבצעת בדיקה בצד לקוח לפני שליחת הטופס לשרת ע"מ לחסוך round-trips מיותרים, של טפסים שלא מולאו בצורה תקינה.

לפני שמתבצע Post-Back של ה form, נבדקים שדות הקלט ובמידה והכל תקין, יישלח הטופס לבדיקה נוספת בשרת ולאחמ"כ לביצוע הפעולה הרצוייה.

במידה ויש לנו צורך לבצע בדיקות נוספות מלבד הבדיקות הרגילות, נוכל לקשור client-side event handler נוסף לפקד שאמור לבצע את ה Post-Back.

נניח שהכפתור שמבצע את ה Submit לשרת נקרא btnAddRecord, נוכל להוסיף לו את ה JS function שהוא צריך להפעיל לפני ה submit, ורק במידה שהכל תקין, הוא רשאי להמשיך.

protected void btnAddRecord_Init(object sender, EventArgs e)
{

string attribute = string.Format(

                    "return validateweigth('{0}')",
                    this.ControlToValidate.ClientID,);

(sender as Button).Attributes.Add("onclick", attribute);
}

באירוע Init של הכפתור, הוספנו לו שם של פונקציית JS שמקבלת clientID של פקד צד-שרת שעליו היא תבצע בדיקות ולידציה, מחזירה ערך בוליאני לפי תוצאות הבדיקה.
לפני שהכפתור ימשיך לביצוע Post Back הוא יחכה ל return value מהפונקצייה.

הבעיה:

נניח שיש לנו עוד כמה שדות קלט שאמורים לעבור וולידציה ע"י פקדי ASP.NET Validators כגון RequiredField Validators, Regex Validators וכו', ויחד יש לנו גם את ה js function הנ"ל על הכפתור שאמור לשמור את הנתונים לשרת, ייתכנו שני מצבים: או שנקבל תשובה שלילית במידה והבדיקה נכשלה, או שוולידציה תסתיים בהצלחה ונקבל תשובה חיובית.

אם קיבלנו תשובה שלילית, כמובן שלא ייבצע Post Back והכל טוב ויפה. אך מה יקרה אם נקבל תשובה חיובית? או אפילו לאו דווקא תשובה חיובית בפועל, אלא מספיק שלא נקבל חזרה false, מבחינת הכפתור הכל בסדר והוא יריץ אותנו לשרת.
זו הבעייה, שכל שאר הוולידציה ב Client-Side לא תתבצע וישר נגיע לשרת, ובעצם בגלל שלא החזרנו לכפתור false, הפסדנו את שאר ה client-side validation של פקדי הוולידציה כיוון שהכפתור חושב שהכל בסדר ואפשר להמשיך הלאה.

איך בכל זאת דואגים לוולידציה בצד ה client?

שני אפשרויות:

א. שימוש ב CustomValidator, ואז לא צריך לקשור את הפונקצייה לכפתור לפני ביצוע post back

ב. לעיתים, יותר נוח להגדיר את הבדיקה על הכפתור ולוותר על השימוש ב CustomValidator, בכדי לפתור את הבעייה, עושים דבר פשוט: בסוף הפונקצייה, בודקים אם הכל עבר בשלום. במידה וכן, לפני שאנחנו מחזירים לכפתור true והוא יברח לנו לשרת ללא בדיקה ב client-side, ישנה מתודת JS מוכנה שתפקידה לבצע את ה client-side validation.

ניתן לקרוא למתודה שתבצע את הוולידציה, בצורה כזו:

Page_ClientValidate();

ואפשר גם להשתמש ב overload שמקבל את ה validation group הרצוי כפרמטר. לדוגמא:

Page_ClientValidate('MyValidationGroup');

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