jQuery 验证：不同的消息使用不同的颜色？

Question

目前，我能够 return 针对不同的 jQuery 验证失败发送不同的消息。其工作代码如下所示。此外，我希望这些消息具有不同的颜色，即“错误”消息为红色，“警告”消息为橙色。我该怎么做？

这是针对不同错误显示不同消息的工作代码——我还希望这些消息使用不同颜色：

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

添加以下内容：

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>';

Answer 2

事后看来，解决方案很简单。困难的部分是弄清楚在哪里可以找到当前错误消息的文本以确定它是错误还是警告，以及如何准确地更新输入和消息 classes.

用于更新输入的方法 class 是标准的，在 highlight 选项中使用 addClass 和 removeClass。然而，这对消息 class 不起作用，因为它第一次运行时，消息元素尚未创建。相反，我们在创建 message 元素之前更改了 errorClass 的值，因此随后使用所需的 class.

创建了 message 元素

警告：这对我有用。它可能不适合你。仅进行了基本测试。可能有错误。使用风险自负。

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>
...

jQuery 验证：不同的消息使用不同的颜色？

jQuery validation: different colors for different messages?

jquery

jquery-validate