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正在修改文档（＆＃34; DOM＆＃34;）以添加名为＆＃34; error＆＃34;的类。您可以使用CSS规则来建议颜色，字体，边框，间距或任何您想要的那些＆＃34;错误＆＃34;元素：

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

大多数现代浏览器都有一个开发工具包，允许您检查元素并查看浏览器在绘制该元素时使用的CSS规则。在我的浏览器中，我可以使用右键单击＆＃34; Inspect Element＆＃34;。它可能与你的相似。

Answer 2

有参数errorClass，errorElement和errorContainer。您是否尝试阅读Documentation?

Answer 3

您正在将类“error”分配给带有错误的元素的父级。通过向错误类添加一些CSS，您可以配置文本颜色，背景颜色，边框颜色等。

CSS：

.error {
  color: #F00;
  background-color: #FFF;
}

如果错误类已加载错误，则添加另一个类。如果类需要在元素上（而不是父元素），只需从链中删除.parent（）调用。

Answer 4

使用此CSS更改错误的文本颜色：

.error {
  color: #F00;
  background-color: #FFF;
}

jQuery验证消息颜色

4 个答案: