wordpress评论表单验证代码
很多使用wordpress默认主题的朋友们往往会被提交评论时的错误提醒折磨,明明可以在前端进行的错误提示却非要跳转页面,用户体验非常不好。
其实网上有很多现成的解决方案,比如ajax Post Comment。对于不想安装插件的朋友,这里也有一个简单的节约方案,让你的博客顿时清爽起来。
代码如下:
add_action('comment_form','validateCommentForm');
function validateCommentForm(){
?>
<script>
fieldName = {
'comment': '评论',
'author': '评论者姓名',
'email': '电子邮件地址'
};
jQuery(document).ready(function() {
jQuery('#commentform').find("[required='required']").blur(function() {
validateFieldValue(jQuery(this).attr('id'), jQuery(this).val())
}).focus(function(){
jQuery("#" + jQuery(this).attr('id') + "-error").remove();
});
jQuery('#commentform').submit(function(e) {
if (jQuery(this).find("[unvalid='unvalid']").length > 0) e.preventDefault();
});
});
function validateFieldValue(fieldId, fieldValue) {
if (fieldId != 'email' && fieldValue == '') {
showErrorMsg(fieldId);
return;
} else if (fieldId == 'email' && checkEmail(fieldValue) == false) {
showErrorMsg(fieldId);
return;
} else {
jQuery('#' + fieldId).removeAttr('unvalid');
return;
}
}
function showErrorMsg(unvalidFiledId) {
errorField = jQuery('#' + unvalidFiledId);
jQuery("#" + unvalidFiledId).after('<span id="' + unvalidFiledId + '-error"></span>');
jQuery("#" + unvalidFiledId + "-error").css({
'display': 'flex',
'position': 'absolute',
'align-items': 'center',
'justify-content': 'center',
'color': 'red',
'cursor': 'text',
'font-size': '1.2em',
'left': errorField.position().left,
'top': errorField.position().top,
'height': errorField.css('height'),
'width': errorField.css('width')
}).html(fieldName[unvalidFiledId] + ' 为空或不合法').click(function() {
jQuery(this).remove();
jQuery('#'+unvalidFiledId).focus();
});
}
function checkEmail(str) {
var re = /^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,4}$/;
if (re.test(str)) {
return true;
}
return false;
}
</script>
<?php
}
将以上代码粘贴到主题的functions.php文件即可。
或者将其中的js代码复制到单独的js文件,在header或footer引入。