3 bước tạo form validate cho wordpress comment

Posted on May 1, 2022June 23, 2022 by admin

4/5 - (2 votes)

Ở bài viết Form validate bằng jquery chúng ta đã cùng tìm hiểu cách dùng validate. Ở bài viết dưới đây sẽ áp dụng vào để tạo form validate cho wordpres comment.

Trong phần comment của wordpress, mỗi khi người dùng bấm submit mà chưa điền thông tin, hoăc điền thông tin không hợp lệ. Thì bạn sẽ được chuyển sang một trang báo lỗi để bạn biết được mình đang gặp phải lỗi gì. Nhưng như vậy thì trông rất xấu và không hề chuyên nghiệp chút nào. Nếu bạn là người làm web thì chã bao giờ muốn khách hàng thấy điều đó.

tạo form validate cho wordpress comment

Bạn mong muốn báo lỗi hiện ngay dưới các trường nhập liệu (field) khi người dùng nhập thông tin không đúng yêu cầu vào. Cách tốt nhất và đơn giản nhất trong việc tạo form validate cho wordpress comment là sử dụng thư viện jquery validate có sẵn để làm điều đó.

Nội dung bài viết

Các bước tạo form validate cho wordpress comment

Trong phần comment form của wordpress sẽ có 3 trường nhập liệu chính và bắt buộc là comment, author và email. Vì vậy ta sẽ tiến hành làm validate cho 3 trường này.

Form validate cho wordpress comment field

Đây là phần chứa nội dung bình luận cho bài viết trong wordpress. Bên cạnh việc bắt buộc phải nhập liệu vào (không được để trống) thì giới hạn tối thiểu độ dài của nội dung chúng ta cũng nên thiết lập. Tránh trường hợp người bình luận nhập 1 hoặc 2 ký tự. Như trang web hanhtinhcongnghe.com thì đặt giới hạn tối thiểu là 10 ký tự.

rules: {
          comment: {
            required: true,  //bắt buộc phải nhập thông tin
            minlength: 10    //độ dài tối thiểu quy định là 10
          }
       },

Sau khi có phần rule thì ta cần phải làm phần nội dung thông báo hiển thị ra ngoài để người bình luận thấy.

messages: {
            comment: {
                required: "Vui lòng nhập nội dung bình luận của bạn",
                minlength: "Độ dài của bình luận phải từ {0} ký tự trở lên ",
            }
        },

Lưu ý: để truyền giá trị độ dài tối thiểu mà bạn quy định ở phần rule vào phần nội dung hiển thị thì bạn sử dụng {0} trong chuỗi thông báo

Form validate cho wordpress author field

Phần author này chính là trường name. Ở trường này vì là tên người nên ngoài việc bắt buộc và giới hạn tối thiểu ta nên chỉ cho phép nhập ký tự chữ, để tránh trường hợp khách nhập số hoặc các ký tự khác.

rules: {
          author: {
            required: true,  //bắt buộc phải nhập thông tin
            minlength: 2,    //độ dài tối thiểu quy định là 2
            alphaRegex: true   //chỉ được phép nhập chữ
          }    
       },

alphaRegex là tên của phương thức xác thực tuỳ chỉnh mà ta tạo ra bằng cách sử dụng addMethode trong jquery validate. Để quy định dữ liệu nhập vào chỉ là giá trị chữ. Và bạn cần phải thêm đoạn code bên dưới vào sau validate của bạn.

$.validator.addMethod("alphaRegex", function (value, element) {
    return this.optional(element) || /^[a-z\-]+$/i.test(value);
});

Cuối cùng là dòng thông báo tương ứng với rules ở trên

messages: {
            "author": {
                required: "Họ tên không được bỏ trống",
                minlength: "Họ tên phải từ {0} ký tự trở lên", 
                alphaRegex:"Chỉ cho phép nhập chữ",
            }
          },

Form validate cho wordpress email field

Trong trường email chúng ta cần thiết lập một rule bắt buộc người chơi phải nhập đúng cú pháp của một email.

rules: {
          email: {
            required: true, //bắt buộc phải nhập thông tin
            email: true     //phải nhập đúng định dạng email
          },
        },

messages: {
            "email": {
                required: "Email không được bỏ trống",
                email: "Email chưa đúng định dạng",
            },
         },

Code hoàn chỉnh

jQuery(document).ready(function($) {
    $('#commentform').validate({
        rules: {
          author: {
            required: true,
            minlength: 2,
            alphaRegex: true
          },
    
          email: {
            required: true,
            email: true
          },
    
          comment: {
            required: true,
            minlength: 10
          }
        },

        messages: {
            "author": {
                required: "Họ tên không được bỏ trống",
                minlength: "Họ tên phải từ {0} ký tự trở lên", 
                alphaRegex:"Chỉ cho phép nhập chữ",
            },
            "email": {
                required: "Email không được bỏ trống",
                email: "Email chưa đúng định dạng",
            },
            "comment": {
                required: "Vui lòng nhập nội dung bình luận của bạn",
                minlength: "Độ dài của bình luận phải từ {0} ký tự trở lên ",
            }
        },
    
        errorElement: "div",
        errorPlacement: function(error, element) {
          element.after(error);
        }

    });
    
    $.validator.addMethod("alphaRegex", function (value, element) {
        return this.optional(element) || /^[a-z\-]+$/i.test(value);
    });
});

Nhớ thêm thư viên jquery validate vào để có thể chạy đoạn code trên.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>

Với tất cả cách bước hướng dẫn form validate như trên, hy vọng có thể giúp được bạn tạo form validate cho wordpress comment một cách dễ dàng và nhanh chóng.