css - WordPress评论表单验证

Question

在使用 WordPress 评论验证代码时，它会在输入字段下方显示错误消息。我在最后添加了我在这里找到并正在使用的验证代码。

但我想让它看起来像下面错误图片中的那个。它看起来如此简单明了，每次只有一条消息。有人可以帮我解决代码吗？

评论表单错误截图：

我在这里找到并一直用于验证的代码是：

function comment_validation_init() {
if(is_single() && comments_open() ) { ?>        
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#commentform').validate({

rules: {
  author: {
    required: true,
    minlength: 2
  },

  email: {
    required: true,
    email: true
  },

  comment: {
    required: true,
    minlength: 20
  }
},

messages: {
  author: "Please fill the required field",
  email: "Please enter a valid email address.",
  comment: "Please fill the required field"
},

errorElement: "div",
errorPlacement: function(error, element) {
  element.after(error);
}

});
});
</script>
<?php
}
}
add_action('wp_footer', 'comment_validation_init');

标签： csswordpressformsjquery-form-validatorhtml-formhandler