Kiểm tra định dạng Số điện thoại & Email trong WooCommerce

Nếu bạn đang sử dụng WordPress và có dùng WooCommerce để làm website bán hàng, thì ít nhiều đã gặp tình trạng Số điện thoại & Email của khách đôi khi không đúng, điền nhầm mà không để ý, dẫn tới việc không thể liên hệ lại với khách được. Nếu sử dụng Website bán hàng tại Việt Nam thì nên kiểm tra SĐT đúng định dạng của Việt Nam thì mới cho đặt hàng, không thì sẽ phải cảnh báo để khách sửa lại.

Dưới đây là đoạn mã code kiểm tra phía client, sử dụng Javascript để kiểm tra đầu vào của số điện thoại và email.

<?php
add_action("woocommerce_after_checkout_form", function () {
    ?>
	<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"/>
	<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
	<script>
	    jQuery(document).ready(function($){
	        $(document).on('click', '#place_order', function(e){ /* Bắt sự kiện click tại nút Đặt hàng */
		    e.preventDefault();
		    var phone = $('#billing_phone').val();
		    email = $('#billing_email').val();
					
		    if(phone.length > 0 && !vdh_validatePhone(phone)) { /* Validate số điện thoại */
			$('#billing_phone').focus()
			toastr.error("Thông báo", "Số điện thoại không đúng");
			return
		    }

		    if(email.length > 0 && !vdh_validateEmail(email)) { /* Validate email */
			$('#billing_email').focus()
			toastr.error("Thông báo", "Email không đúng");
			return
	            }
					
	            $(this).submit() /* Nếu không có lỗi gì thì Submit form */
		})
	    })
            
            function vdh_validatePhone(phone) { /* Function validate đúng số định dạng điện thoại VN */
                phone = phone.replace(/\s+/g, ''); // Xóa khoảng trắng
                const re = /^(0[3|5|7|8|9])[0-9]{8}$/;
                return re.test(phone);
            }
            function vdh_validateEmail(email) {
                const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                return re.test(email);
            }
	</script>
    <?php
});
?>

Khi số điện thoại và email được điền đúng thì form đặt hàng sẽ được kích hoạt, lúc này sẽ đảm bảo số điện thoại và email không bị sai. Các bạn có thể tham khảo thêm tính năng tích hợp mã QR vào thanh toán đơn hàng tại đây