jQuery 验证消息颜色

Question

我的表单有一个 jQuery 验证例程，我已经设法用红色突出显示每个控件边框 - 这非常简单。

我想显示每个错误返回的消息以黑色显示，并且我想将其更改为红色 - 不幸的是，我无法找到有关如何实现此目的的任何有用信息。

<script type="text/javascript">
        $("form").validate({
            errorClass: 'errors',
            rules: {
                txtWDUCI: {
                    required: true,
                    minlength: 13,
                },
                txtWDCAND: {
                    required: true,
                    minlength: 4
                },
                txtWDCENT: {
                    required: true,
                    minlength: 5
                },
                mskWDQAN: {
                    required: true,
                    minlength: 8
                },
                mskWDLEAP: {
                    required: true,
                    minlength: 4
                },
                drpWDSES: {
                    required: true
                },
                drpWDSYY: {
                    required: true
                },
                drpWDEXAM: {
                    required: true
                },
                drpWDBRD: {
                    required: true
                },
                mskSubj: {
                    required: true,
                    minlength: 4
                },
                mskWDOPT: {
                    required: true
                },
                txtWDGRD1: {
                    required: true
                },
                txtWDGRD2: {
                    required: true
                },
            },
            messages: {
                txtWDUCI: {
                    required: "&nbsp;REQUIRED: UCI"
                },
                txtWDCAND: {
                    required: "&nbsp;REQUIRED: Candidate Number"
                },
                txtWDCENT: {
                    required: "&nbsp;REQUIRED: Centre Number"
                },
                mskWDQAN: {
                    required: "&nbsp;Required: QAN"
                },
                mskWDLEAP: {
                    required: "&nbsp;REQUIRED: LEAP"
                },
                drpWDSES: {
                    required: "&nbsp;REQUIRED: session"
                },
                mskSubj: {
                    required: "&nbsp;REQUIRED: Subject Code"
                },
                mskWDOPT: {
                    required: "&nbsp;REQUIRED: Option Code"
                },
                txtWDGRD1: {
                    required: "&nbsp;REQUIRED: GRADE 1"
                },
                txtWDGRD2: {
                    required: "&nbsp;REQUIRED: Grade 2"
                }

            },
            highlight: function (element) {
                $(element).parent().addClass('error')
            },
            unhighlight: function (element) {
                $(element).parent().removeClass('error')
            }
        });
    </script>

Answer 1

在网络上，我们使用 HTML 来制作文档，使用 CSS 来建议其外观，并使用 JavaScript 来建议其行为方式。

您的 Javascript 正在修改文档(“DOM”)以添加一个名为“error”的类。您可以使用 CSS 规则来建议颜色、字体、边框、间距或任何您想要的“错误”元素:

   .error {
      color: red;
      background-color: #acf;
   }

大多数现代浏览器都有一个开发工具包，允许您检查元素并查看浏览器在绘制该元素时使用的 CSS 规则。在我的浏览器中，我可以使用右键单击然后“检查元素”。你的可能也有类似的情况。