很多使用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引入。