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

在 Web 上，我们使用 HTML 来制作文档，使用 CSS 来建议它的外观，以及使用 JavaScript 来建议它的行为方式。

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

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

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