Tùy biến thông báo lỗi cho 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 cho contact form 7

Trên website của bạn sẽ chèn nhiều form trên các trang với mục tiêu lấy tin tức khách hàng hoặc cho khách hàng đặt dịch vụ của bạn. Các trường form sử dụng một số kiểu dữ liệu nhất định, tuy vậy để xác minh thông tin cho chính xác bằng phương pháp yêu cầu khách hàng điền đúng tin tức như SĐT, email,..

Trong bài trước mình có hướng dẫn cách thêm thông báo lỗi trong contact form 7. Bạn có thể tìm đọc.

Contact form 7 cung cấp một số kiểu nhập dữ liệu mặc định, gồm những:

  • Trường bắt buộc
  • Trường email
  • Trường upload có chọn lọc định dạng file

Ngoài ra, bạn cũng có thể có thể thêm tùy biến riêng để xác nhận tính hợp lệ của trường. Chúng tỉ dụ sau mình sẽ thêm xác nhận giá trị của trường email. Bạn sẽ nhận thông báo đòi hỏi nhập trường này và một trường email khác để xác nhận lại & 2 trường này phải có giá trị như nhau.

Contact form 7 mặc định không bổ trợ kiểu xác minh này , bạn có thể bảo rằng nó chẳng cần thiết khi người sử dụng phải nhập 2 giá trị giống nhau, vì họ chỉ cần copy sang trường khác. Tuy vậy này là một thí dụ hay giúp bạn hiểu cách thực hiện.

Lọc giá trị trường

Mọi giá trị trường được lọc thông qua hàm filter. Hook lọc tùy thuộc vào kiểu dữ liệu, ví dụ nếu bạn lọc kiểu text thì sử dụng filter ‘wpcf7_validate_text’. bằng cách thêm kiểu dữ liệu bạn có thể chọn kiểu nào có sử dụng trên website của mình wpcf7_validate_ + {type of the form-tag} . Điển hình như wpcf7_validate_email* được dùng cho thẻ email*

Giả sử bạn có thêm trường email trong form:

 Email: [email* your-email] Confirm email: [email* your-email-confirm]  

Đoạn code sau cho bạn kiểm tra giá trị trùng nhau của 2 trường. Thêm vào file functions.php với nội dung dưới đây:

 add_filter( 'wpcf7_validate_email*', 'custom_email_confirmation_validation_filter', 20, 2 ); function custom_email_confirmation_validation_filter( $result, $tag ) { if ( 'your-email-confirm' == $tag-> name ) { $your_email = isset( $_POST['your-email'] ) ? trim( $_POST['your-email'] ) : ''; $your_email_confirm = isset( $_POST['your-email-confirm'] ) ? trim( $_POST['your-email-confirm'] ) : ''; if ( $your_email != $your_email_confirm ) { $result-> invalidate( $tag, "Are you sure this is the correct address?" ); } } return $result; }  

Để ý 2 tham số truyền vào hàm filter $result, $tag. Trong đó: $result là đối tượng kiểu WPCF7_Validation quản lý & xác minh tính hợp thức của trường và $tag tạo bởi class WPCF7_FormTag

Ở hàm trên, đầu tiên lọc tên trường cần kiểm tra (your-email-confirm). Tiếp thep sẽ so sánh giá trị của 2 trường email, nếu khác nhau bạn gọi hàm ‘$result-> invalidate()’ với nội dung thông báo cho người dùng. Lưu ý, dừng quên trả về giá trị không hợp lệ của form.

Bạn muốn kiểm tra ngay trên form trước lúc người dùng có thể nhấn nút gửi. Để linh hoạt hơn chúng ta sẽ sử dụng mã javascript làm bước trước mắt để kiểm tra tính hợp thức của trường. Nếu trình duyệt không bổ trợ javascript hoặc bị vô hiệu hóa bởi người dùng thì chúng ta đã có bộ lọc PHP ở trên. Thật tuyệt hảo phải không?

Ví dụ sau yêu cầu nhập đủ thông tin trên form & kiểm tra từng giá trị trường của bạn. Thay bằng tên trường có sử dụng trên website của bạn:

  $('form.wpcf7-form .wpcf7-submit').click(function(e){ var frm=$(this).closest('form'), data=frm.serializeArray(); for(var i in data) { if(data[i].name.indexOf('_wpcf7')!==-1) continue; if(data[i].value==="") { e.preventDefault(); alert('Vui lòng điền đầy đủ thông tin'); return false; } if(data[i].name=='phone' && (data[i].value.length> 11 || !/[d+]/g.test(data[i].value))) { e.preventDefault(); alert('Vui lòng điền đúng SĐT?'); return false; } if(data[i].name=='email' && !validateEmail(data[i].value)) { e.preventDefault(); alert('Vui lòng điền đúng email?'); return false; } } /*if(!hoten || !tel || !email) { e.preventDefault(); alert('Vui lòng điền đầy đặn thông tin'); return false; }*/ }); $('form.wpcf7-form').submit(function(e){ var frm=$(this), data=frm.serializeArray(); for(var i in data) { if(data[i].name.indexOf('_wpcf7')!==-1) continue; if(data[i].value==="") { e.preventDefault(); alert('Vui lòng điền đầy đủ thông tin'); return false; } if(data[i].name=='phone' && (data[i].value.length> 11 || !/[d+]/g.test(data[i].value))) { e.preventDefault(); alert('Vui lòng điền đúng SĐT?'); return false; } if(data[i].name=='email' && !validateEmail(data[i].value)) { e.preventDefault(); alert('Vui lòng điền đúng email?'); return false; } } }); function validateEmail(email) { var re = /^(([^  ()[]\.,;:[email protected]"]+(.[^  ()[]\.,;:[email protected]"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/; return re.test(email); }  

Mỗi khi giá trị điền không hợp lệ, bạn trả về false cho buổi lễ submit & form sẽ dừng hoạt động.

Nếu bạn thích bài viết này, hãy cỗ vũ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dấu blog này trên Twitter và Facebook

Bài viết Tùy biến thông báo lỗi cho 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