Mình đưa ra một vài gợi ý dưới đây giúp bạn hạn chế được những yêu cầu không mong muốn trong biểu mẫu liên hệ form cho trang blog của mình. Cho dù bạn đang viết blog với chủ đề gì cũng cần có một biểu mẫu form để độc giả, khách hàng liên hệ với bạn khi cần.
Cách mà mình làm áp dụng với biểu mẫu Google form trong đó mình sẽ tạo trước các câu trả lời để mọi người điền. Có 2 bước validate form chính các bạn cần biết đó là validate form với HTML5 và validate bằng Script. Áp dụng cùng lúc cả 2 phương pháp giúp hạn chế đến mức thấp nhất những yêu cầu spam.
Spam có nhiều loại như spam bằng robot, spam từ người trong đó chủ yếu là từ người spam cố tình nghịch phá nhưng không thường xuyên. Spam từ người có 2 loại: loại không biết code và loại biết code. Với những ai biết code rất khó để hạn chế được họ nếu họ muốn spam nhưng những người không biết code có thể chặn họ.
Validate form với HTML5
Cụ thể với validate dạng này sử dụng các thuộc tính có trong form để xác thực. Các thuộc tính dưới đây nên được sử dụng
Thuộc tính required cho câu hỏi bắt buộc
Với những câu hỏi bắt buộc phải nhập hay chọn chỉ cần thêm thuộc tính required bên trong
<input required="">
<textarea required=""></textarea>
<select required=""></select>
Thuộc tính độ dài ký tự min, max, minlength, maxlength
Thuộc tính này áp dụng cho những câu hỏi dạng nhập có type="text", type="email", type="number". Nếu sử dụng cho loại type="text", type="email" thì sử dụng thuộc tính minlength, maxlength hoặc kết hợp cả hai còn nếu sử dụng cho loại type="number" thì sử dụng thuộc tính min, max. Một số ví dụ:
Sử dụng minlength, maxlength cho loại input type="text"
+ Giới hạn tối thiểu 20 ký tự
<input minlength="20" required="" type="text">
+ Giới hạn tối đa 100 ký tự
<input maxlength="100" required="" type="text">
+ Giới hạn trong khoảng 20 đến 100 ký tự
<input maxlength="100" minlength="20" required="" type="text">
Sử dụng min, max cho loại type="number"
+ Giới hạn tối thiểu 20 số
<input min="20" required="" type="number">
+ Giới hạn tối đa 100 số
<input max="100" required="" type="number">
+ Giới hạn trong khoảng 20 đến 100 số
<input max="100" min="20" required="" type="number">
Thuộc tính pattern nhập đúng ký tự
Áp dụng cho những câu hỏi về địa chỉ email, điện thoại liên lạc
+ Địa chỉ email
<input pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}"required="" type="email">
+ Điện thoại liên lạc áp dụng ở Việt Nam
<input pattern="(\+84|0)\d{9,10}" required="" title="Nhập số điện thoại từ 10 đến 11 số" type="text">
Validate form với reCAPTCHA v2
Chèn thêm dịch vụ xác thực của Google sẽ chặn những bot tự động, các bạn xem bài viết chi tiết Cách tạo mới Google reCAPTCHA v2 và chèn vào contact form
Chặn những ip spam
Sử dụng phương pháp này có hai tác dụng thứ nhất lấy được ip khách hàng mỗi khi gửi form, thứ hai từ ip đó nếu ip đó spam sẽ chặn không cho gửi lần sau, các bạn đọc bài viết Cách lấy ip khách hàng khi submitted form
Validate form bằng Script
Xác thực bằng cách này thông qua nút gửi form sau khi đã hoàn tất các câu trả lời. Đầu tiên mình sẽ có mẫu form liên hệ dạng sau:
<form action="link Google form" name="contact-form" method="POST" target="hidden_iframe">
<label>Họ tên</label>
<input type="text" name="" placeholder="Câu trả lời của bạn..." value=""/>
<label>Địa chỉ email *</label>
<input class="address required" name="" pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" placeholder="Câu trả lời của bạn..." required="" type="email" value=""/>
<label>Địa chỉ liên lạc tối thiểu 20 ký tự *</label>
<input class="address required" minlength="20" name="" placeholder="Câu trả lời của bạn..." required="" type="text" value=""/>
<input class="ip_address required" name="" type="hidden" value=""/>
<label>Số điện thoại *</label>
<input class="required" name="" pattern="(\+84|0)\d{9,10}" placeholder="Câu trả lời của bạn..." required="" title="Nhập số điện thoại từ 10 đến 11 số" type="text" value=""/>
<label>Nội dung liên hệ tối thiểu 100 ký tự *</label>
<textarea class="required" minlength="100" name="" placeholder="Câu trả lời của bạn..." required=""></textarea>
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<div class="error-message"></div>
<button type="submit" value="Send"></button>
</form>
<iframe height="0" name="hidden_iframe" style="display:none;" width="0"></iframe>
Mình sẽ kết hợp các yếu tố validate form ở trên viết một đoạn script bằng Jquery để xác thực. Đoạn script sẽ sử dụng các điều kiện để xác thực với mỗi điều kiện không đúng sẽ vô hiệu hóa nút gửi form
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script async='async' defer='defer' src='https://www.google.com/recaptcha/api.js'/>
<script>//<![CDATA[
$(function() {
var form = $('form[name=contact-form]'),
input_required = $(form).find('.required').length,
input_ip = $(form).find('.address'),
ip_lish = ["ip1","ip2","ip3"] // Thêm danh sách ip muốn chặn
$(input_ip).keypress(function() {
if ($(this).val() != '') $.getJSON('https://api.ipify.org?format=json', function(data) {
$('input.ip_address').attr('value', data.ip)
})
})
$(form).on('submit', function() {
var $this = $(this)
if ($this.find('.required').length != input_required) {
$this.find('button[type="submit"]').attr('disabled', 'disabled').css('pointer-events', 'none')
} else {
var ip = $this.find('input.ip_address').attr('value')
if (ip_lish.includes(ip)) {
$this.find('button[type="submit"]').attr('disabled', 'disabled').css('pointer-events', 'none')
} else {
if ($('.g-recaptcha').length != '') {
var captcha_response = grecaptcha.getResponse()
if (captcha_response.length == 0) {
$('.error-message').html('<p style="margin-bottom:1.3rem;color:#d93025;">Vui lòng chọn hộp kiểm này nếu bạn muốn tiếp tục.</p>')
return false
} else {
setTimeout(function() {
$this[0].reset()
grecaptcha.reset()
$('.error-message').empty()
console.clear()
}, 4000)
}
return true
} else {
$this.find('button[type="submit"]').attr('disabled', 'disabled').css('pointer-events', 'none')
}
}
}
})
})
//]]></script>
Các bạn tham khảo bài viết đầy đủ về validate form với HTML5 theo liên kết https://www.sitepoint.com/client-side-form-validation-html5/, còn những phương pháp validate form khác như thêm reCAPTCHA, chặn ip, validate form bằng script là những gợi ý thêm của mình và còn rất nhiều phương pháp validate form khác từ những bài viết trên mạng, các bạn tìm kiếm tham khảo thêm để hạn chế spam cho biểu mẫu form trong blog mình.
