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

🗣 Bài viết đăng bởi Pinker vào lúc 03-12-2023 và cập nhật lúc 03-12-2023 👁 874 lượt xem
Chia sẻ ➯
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.

Bắt sự kiện click nút Đặt hàng
Bắt sự kiện click nút Đặt hàng
Đủ số nhưng sai đầu số
Đủ số nhưng sai đầu số

 

Thiếu số điện thoại
Thiếu số điện thoại

 

Thừa số điện thoại
Thừa số điện thoại
<?php
add_action("woocommerce_after_checkout_form", function () {
    ?>
        /* Sử dụng Toastr để tạo cảnh báo đẹp mắt hơn */
	<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 */
                const re = /((09|03|07|08|05)+([0-9]{8})b)/g;
                return re.test(String(phone));
            }
	    function vdh_validateEmail(email) {
		const 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(String(email).toLowerCase());
	    }
	</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

5/5 - (3 bình chọn)

Bài viết khác

Tổng hợp Download Plugin - Theme cho WordPress : Xem ngay
Nhóm Zalo : Tham gia ngay
TAGS: KIỂM TRA DỮ LIỆU WOOCOMMERCE KIỂM TRA SỐ ĐIỆN THOẠI PHONE WOOCOMMERCE SỐ ĐIỆN THOẠI WOOCOMMERCE VALIDATE SỐ ĐIỆN THOẠI WOOCOMMERCE

Bài viết khác

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

tám cộng 1 = mấy (trả lời bằng chữ) ?

Hotline Zalo Giới thiệu
0986.209.305
Zalo
Giới thiệu