jQuery Validation message colour

Question

I have a jQuery validation routine for my form, I've managed to highlight each control border in red - that was pretty easy.

I would like to display the messages returned for each error are shown in black, and I would like to change that to red - unfortunately I'm unable to find any useful information on how I would achieve this.

<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

On the Web, we use HTML to make a document, CSS to suggest how it should look, and JavaScript to suggest how it should behave.

Your Javascript is modifying the document ("DOM") to add a class called "error". You can use CSS rules to suggest colors, fonts, borders, spacing or whatever you want for those "error" elements:

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

Most modern browsers have a development toolkit which allows you to inspect an element and see the CSS rules browser has used when drawing that element. In my browser, I can use right-click then "Inspect Element". It might be something similar on yours.

Answer 2

Use this css to change the text color of errors:

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