jQuery validation: different colors for different messages?

Question

Currently I am able to return different messages for different jQuery validation failures. The working code for that is shown below. In addition, I would like these messages to be different colors, i.e. red for the "Error" message and orange for the "Warning" message. How can I do this?

Here is the working code to display different messages for different errors—I also want these messages to be in different colors:

CSS

.error {
    color:red;
}

JavaScript

<script>
    $(function () {
        $("#inputForm").validate(
          {
              rules:
              {
                  appleQty:{min:0, max:100, range: [4, 8]},
                  bananaQty:{min:0, max:100, range: [2, 4]},
                  cherryQty:{min:0, max:100, range: [80, 85]}
              }
          });
    });
    jQuery.validator.messages.min = 'Error: Minimum value is {0}.';
    jQuery.validator.messages.max = 'Error: Maximum value is {0}.';
    jQuery.validator.messages.range = 'Warning: Expected range is {0} to {1}.';
</script>

HTML

...
<tr><td>Apples</td><td> <input type="text" id="appleQty" name="appleQty" > </td></tr>
<tr><td>Bananas</td><td> <input type="text" id="bananaQty" name="bananaQty" > </td></tr>
<tr><td>Cherries</td><td> <input type="text" id="cherryQty" name="cherryQty" > </td></tr>
...

Answer 1

The solution, in hindsight, was simple. The difficult part was figuring out where to find the text of the current error message to determine whether it is an Error or a Warning and how, exactly, to correctly update the input and message classes.

The method used to update the input class was standard, using addClass and removeClass in the highlight option. However this does not work for the message class, because the first time it runs, the message element has not yet been created. Instead, we change the value of errorClass before the message element is created, so the message element is then created with the desired class.

Caveat: This works for me. It might not work for you. Only basic testing has been done. There might be bugs. Use at your own risk.

CSS

.error {
    color:red;
}

.warn {
    color:darkorange;
}

JavaScript

<!-- Define jquery validation methods for input fields -->
<script>
    $(function () {
        $("#inputForm").validate(
          {
              rules:
              {
                  appleQty:{min:0, max:100, range: [4, 8]},
                  bananaQty:{min:0, max:100, range: [2, 4]},
                  cherryQty:{min:0, max:100, range: [80, 85]}
              },

              highlight: function (element, errorClass, validClass) {
                  // Get message text for current error.
                  errorMessage = $("#inputForm").validate().errorList[0].message;
                  if (errorMessage.includes("Warning")) {
                      // Set input field class to "warn".
                      $(element).removeClass("error").addClass("warn");
                      // Set message class to "warn".
                      // Note: addClass/removeClass does not work here because the first time this runs
                      // the message element is not yet created.
                      this.settings.errorClass = "warn";
                  } else {
                      // Set input field class to "error"
                      $(element).removeClass("warn").addClass("error");
                      // Set message class to "error";
                      // Note: addClass/removeClass does not work here because the first time this runs
                      // the message element is not yet created.
                      this.settings.errorClass = "error";
                  }
              },
              unhighlight: function (element, errorClass, validClass) {
                  $(element).removeClass("error");
                  $(element).removeClass("warn");
              }
          });
    });
    // Order is significant. Conditions are evaluated from
    // most severe to least severe, with warning last.
    jQuery.validator.messages.number = 'Error: Input must be a number.';
    jQuery.validator.messages.min = 'Error: Minimum value is {0}.';
    jQuery.validator.messages.max = 'Error: Maximum value is {0}.';
    jQuery.validator.messages.range = 'Warning: Expected range is {0} to {1}.';
</script>

HTML

...
<tr><td>Apples</td><td> <input type="text" id="appleQty" name="appleQty" > </td></tr>
<tr><td>Bananas</td><td> <input type="text" id="bananaQty" name="bananaQty" > </td></tr>
<tr><td>Cherries</td><td> <input type="text" id="cherryQty" name="cherryQty" > </td></tr>
...

Answer 2

Add the following:

CSS

.error {
    color:red;
}
.warning{
    color:orange;
}

Javascript

jQuery.validator.messages.min = '<span class="error">Error: Minimum value is {0}.</span>';
jQuery.validator.messages.max = '<span class="error">Error: Maximum value is {0}.</span>';
jQuery.validator.messages.range = '<span class="warning">Warning: Expected range is {0} to {1}.</span>';