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 đích lấy thông tin 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 nhiên để xác minh thông tin cho chính xác bằng cách yêu cầu khách hàng điền đúng thông tin 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, bao gồm:

• 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ể thêm tùy biến riêng để xác nhận tính hợp lệ của trường. Chúng ví 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 yêu cầu 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 cần phải có giá trị như nhau.

Contact form 7 mặc định không hỗ trợ kiểu xác minh này , bạn có thể nói rằng nó không cần thiết khi người 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 đây là một ví 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 sử 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 lệ 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ông giống 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 khi 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 đầu tiên để kiểm tra tính hợp lệ của trường. Nếu trình duyệt không hỗ 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 vời 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 đủ 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 = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[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 sự kiện submit & form sẽ dừng hoạt động.

Nếu bạn thích bài viết này, hãy ủng hộ 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õi blog này trên Twitter và Facebook