יצירת ולידציה עבור Contact form 7

מבוא

תוסף CF7 ללא ספק הכי גמיש שקיים, אבל יש לו מגבלות רבות שמקשות על העבודה. כברירת מחדל, תוסף מכיע עם מספר בדיקות פשוטות כמו בדיקת שדה חובה (מסומן בכוכבית), בדיקת תקינות מייל ועוד כמה דברים בקטנה. כמו כן טקסט שגיאה מאפשר ניסוח אחיד לכל השדות.
אני מתנגד לתוספים, ובמקרה הזה לא מצאתי בכלל תוסף טוב, אז נאלצתי לבצע מחקר ולכתוב קוד משלי.
לדוגמה אחת הדרישות הייתה לגרום למספר טלפון להיות ערך מספרי וגם להכיל מספר נכון של 9 או 10 ספרות. בנוסף לכך לא לכתוב ״שדה זה חובה״ אלה ״שדה שם חובה״.

ולידציה ב JS

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

ולידציה של כל שדה בנפרד תוך כדי הזנה או לאחר מעבר לשדה אחר מתאפשר בעזרת השפעה על DOM.

את הקוד הזה מטמיעים בקובץ JS קיים או יוצרים חדש ומחברים לתבנית

 document.querySelector('#phone').addEventListener('change',function(){
    const {value} = this;
    const regexPattern = /^(\D*\d){9}$|^(\D*\d){10}$/

    if(! regexPattern.text(value) ){
        // insert code with message
    }
}); 

 document.querySelector('#phone').addEventListener('input',function(){
    const {value} = this;
    const regexPattern = /^(\D*\d){9}$|^(\D*\d){10}$/

    if(! regexPattern.text(value) ){
        // insert code with message
    }
}); 

הבדל משמעותי בין השניים שהראשון עושה בדיקות על שינוי של השדה, גלומר רק כשאר עוברים לשדה הבא, והשני עושה בדיקה בכל הקלדה.

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

 	document.addEventListener('wpcf7submit', function(event) {
		if ('phone' === event.detail.contactFormId) {
			const phoneField = document.querySelector('#phone');
			const {value} = phoneField;
			const regexPattern = /^(\D*\d){9}$|^(\D*\d){10}$/

			
			if(! regexPattern.text(value) ){
				// insert code with message
				event.preventDefault(); // מנע את שליחת הטופס
			}
		}
	}); 

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

ולידציה בצד שרת ברמת PHP

ביצוע בדיקת ולידציה ברמת שרת מתבצעת בצורה פשוטה, צריך להשתמש ב filter מותאם אישית wpcf7_validate_{field_type} שבעצם סוג שדה זה אותם שדות שאנחנו בוחרים במערכת הניהול של התוסף (text, email וכו…).

 [ text* your_name ] 
[ text your_phone ]
[ email* your_email ] 

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

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

את הקוד הזה מטמיעים בקובץ function.php, או יוצרים חדש ומחברים לfunction.php

 function ya_cf7_custom_validation_message( $result, $tag ) {
	if ( 'your-name' == $tag->name ) {
			$your_name = isset( $_POST['your-name'] ) ? trim( $_POST['your-name'] ) : '';
		if ( $your_name == ""  ) {
			$result->invalidate( $tag, __('Your name is required field', 'yawp' ) );
		}
		}
	if ( 'your-phone' == $tag->name ) {
			$your_phone = isset( $_POST['your-phone'] ) ? trim( $_POST['your-phone'] ) : '';

			$phone = str_replace([' ', '.', '-', '(', ')'], '', $your_phone);
			$valid = preg_match('/^[0-9]{9,10}\z/', $phone);

		if ( !$valid ) {
				$result->invalidate( $tag, __('Your Phone is not valid', 'yawp' ) );
			}
		}
	if ( 'your-email' == $tag->name ) {
		$your_email = isset( $_POST['your-email'] ) ? trim( $_POST['your-email'] ) : '';
		if ( $your_email == ""  ) {
			$result->invalidate( $tag, __('Your Email is required field', 'yawp' ) );
		}
	}

	return $result;
} 

בודקים את הname לפי אובייקט $tag לומחפשים את השדות שלנו. בשני שדות חובה בודקים את השדה הספציפי שהוא בתוך משתנה $result שאת מדובר בשדה ריק וגם את דרישות מהמייל, בשדה טלפון בודקים את הצורך בקויום מספר 9 או 10 ספרותר ולבסוף מעדכנים את תוצאה $result.

הדבר האחרון שנשאר לנו לבצע זה להפעיל את הfilter כדי שיעבוד.

 add_filter( 'wpcf7_validate_text', 'ya_cf7_custom_validation_message', 1, 2 );
add_filter( 'wpcf7_validate_text*', 'ya_cf7_custom_validation_message', 1, 2 );
add_filter( 'wpcf7_validate_email*', 'ya_cf7_custom_validation_message', 1, 2 ); 

השתמשנו בtext שהוא חובה ולא חובה ובמייל שהוא חובה. חייפים להוסיף כוכבית לכל שדה שמוגדר חובה לשים לב לזה.

המחשה

הבדלים בין ולידציה JS מול PHP

בדיקת ולידציה ברמת הדפדפן (JS) הרבה יותר יעיל, נוח וקל בגלל שמדובר בקוד שרץ אצל הגולשים. זמן תגובה מהיר מאוד לפעמים במהלך הקלדה עצמה.
מצד שני, פחות מאובטח וגולשים יכולים לכבות את JS או ״לרמות״ את הדפדפן.

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

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

סיכום

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

בעתיד אני חושב ליצור תוסף