Tùy biến thông báo lỗi validation – Contact Form 7

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Tùy biến thông báo lỗi validation – Contact Form 7

Hi! Trong bài viết này mình sẽ hướng dẫn các bạn cách tùy biến hiển thị thông báo validation cho trường contact form 7.
wpcf7-validation

Sửa nội dung và tùy biến validation

Sửa chuỗi hiển lời nhắn lỗi, ví dụ thông báo mặc định cho “require field” là “Please fill the required field.”. Để thay đổi lời nhắn này bạn truy cập trang sửa form Contact -> Contact Forms và sửa lại văn bản trong mục Messages .

Bên cạnh đó, bạn cũng có thể thay đổi hiển thị động mọi chuỗi hiển thị có trong mục Messages của cấu hình form, chẳng cần sửa trực tiếp file plugin ‘text.php’ mà sử dụng hook được khái niệm trong file này. Bạn hoàn toàn tùy biến ‘validation’ dễ dàng bằng cách thêm filter wpcf7_validate_text trong theme functions.php hoặc viết vào plugin mới của bạn.

 add_filter( 'wpcf7_validate_text', 'your_validation_filter_func', 10, 2 ); add_filter( 'wpcf7_validate_text*', 'your_validation_filter_func', 10, 2 ); function your_validation_filter_func( $result, $tag ) { $type = $tag['type']; $name = $tag['name']; if ( 'your-id-number-field' == $name ) { $the_value = $_POST[$name]; if ( is_not_valid_against_your_validation( $the_value ) ) { $result['valreason'][$name] = "Error message here"; } } return $result; }  

Thêm ký tự * sau tên hook sử lý cho trường yêu cầu, bắt buộc nhập. Giá trị trường có thỏa mãn hay là không bạn thiết lập kết quả $result['valreason'][$name]="validation modified...";

Mặc định chuỗi validation lấy trong phần messages settings bởi hàm wpcf7_get_message . Xác định chuỗi lỗi với các loại message thích hợp cần hiển thị. Ví dụ required field, chúng ta lấy message ‘invalid_required’.

 if ( 'textarea*' == $type ) { if ( '' == $value ) { $result['valreason'][$name] = wpcf7_get_message( 'invalid_required' ); } }  

Tham số $result được thừa hưởng vào hook wpcf7_before_send_mail trước khi trả về kết quả json. Bạn cũng có thể có thể sử dụng tham số này để tùy biến thêm.

Mỗi field shortcode sử dụng hook validation riêng, tên hook tương ứng với loại field theo sau bởi tên shortcode. vd: [ select menu-891 “1” “2” “3” ]
có validation hook là wpcf7_validate_select & wpcf7_validate_select* dành cho trường require [ select* menu-891 “1” “2” “3” ]
Do đó mỗi trường shortcode sẽ được 2 loại hook tương ứng , bạn nên trỏ 2 hook này vào một hàm kiểm tra validation của trường.

Ví dụ sau đây sửa lại validation cho email field, bắt buộc người dùng phải sử dụng email của công ty, không cho phép dùng free mail như: gmail, yahoo,…Sửa lại đoạn code dưới đây theo ý bạn.

 // Add custom validation for CF7 form fields function is_company_email($email){ // Check against list of common public email providers & return true if the email provided *doesn't* match one of them if( preg_match('/@gmail.com/i', $email) || preg_match('/@hotmail.com/i', $email) || preg_match('/@live.com/i', $email) || preg_match('/@msn.com/i', $email) || preg_match('/@aol.com/i', $email) || preg_match('/@yahoo.com/i', $email) || preg_match('/@inbox.com/i', $email) || preg_match('/@gmx.com/i', $email) || preg_match('/@me.com/i', $email) ){ return false; // It's a publicly available email address }else{ return true; // It's probably a company email address } } function custom_email_validation_filter($result,$tag){ $type = $tag['type']; $name = $tag['name']; if($name == 'company-email'){ // Only apply to fields with the form field name of "company-email" $the_value = $_POST[$name]; if(!is_company_email($the_value)){ // Isn't a company email address (it matched the list of free email providers) $result['valreason'][$name] = 'You need to provide an email address that isn't hosted by a free provider. 
Please contact us directly if this isn't possible.'; } } return $result; } add_filter('wpcf7_validate_email','custom_email_validation_filter', 10, 2); // Email field add_filter('wpcf7_validate_email*', 'custom_email_validation_filter', 10, 2); // Req. Email field

Hiển thị Static hoặc Floating-tip

wpcf7 có 2 lựa chọn cho tin nhắn lỗi validation: static và floating-tip. Static hiện tại là chọn lựa mặc định. Float-tip sử dụng css position:absolute; hiển thị phất như thế này.
wpcf7-validation-msg

Để áp dụng kiểu field với thông validation dạng ‘floating-tip’ và cũng có thể có thể sử dụng cho toàn fields trong form. Nguyên tắc cơ bản khi form field có thẻ bao chứa class ‘use-floating-validation-tip’ sẽ hiển thị lời nhắn lỗi (validation) float-tip khi trường có mức giá trị sai hoặc các trường yêu cầu (require *). Ví dụ:

   [ text* your-name ]    

Nếu bạn muốn áp dụng float-tip style cho cả fields trong form, nghĩa là thêm vào thẻ form. Trong bài tạo form liên hệ trong wordpress với WPCF7 mình có hướng dẫn cách thêm bạn chỉ việc thêm chuỗi này vào tính chất html_class cho shortcode hiển thị form contact-form-7 .
Ví dụ:

 [ contact-form-7 >   

Tham khảo :
Plugin hiển thị validation Jquery Validation For Contact Form 7

Để thu được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể có thể nhận được sự trợ giúp trên Twitter và Facebook

Bài viết Tùy biến thông báo lỗi validation – Contact Form 7 được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang