Vaadin 14：将 TextField 中的错误消息标记为警告

Question

对于 Vaadin 14.1.23 TextFields，我想在视觉上区分红色错误消息（例如“此值太大。”）和黄色警告（例如“系统会将您的输入四舍五入到两位小数。”）。也可以选择蓝色信息消息。

因此，我创建了一个带有验证器的 TextField，如本例所示（https://vaadin.com/components/vaadin-text-field/java-examples/validation）：当您在标签为“Min 2”的字段中输入“1”时个字符”，然后该字段变为红色并显示错误：“最少 2 个字符”。

显示这样的（黄色）警告消息怎么样？

我尝试的是这样的：在验证器的 apply 方法中，我创建了一个带有 ErrorLevel WARNING 的验证结果，如下所示：

ValidationResult.create("System will round the decimals.", ErrorLevel.WARNING);

但 Vaadin 仍然生成了一个带有 part="error-message" 的 div：

<div part="error-message" aria-live="assertive" aria-hidden="false" id="my-field-error-44">System will round your input to two decimals.</div>

Answer 1

有一种方法可以达到这种效果。

首先，您需要为vaadin-text-field. 在文件夹中创建text-field-theme.css文件，frontend/styles内容为：

:host([class="warn"]) [part="error-message"] {
    color: orange;
}

:host([invalid][class="warn"]) [part="input-field"] {
    background-color: rgba(255, 166, 0, 0.1);
    box-shadow: inset 0 0 0 1px orange;
}

通过这段代码，您可以说：当文本字段具有“警告”类时，错误消息为橙色，输入字段周围的框为橙色，输入字段背景为透明（0.1）橙色。

然后将其导入到您的视图中：

@CssImport(value = "./styles/text-field-theme.css", themeFor = "vaadin-text-field")

然后，您将字段与 2 个验证器绑定，其中一个带有错误条件，第二个带有警告条件：

TextField textField = new TextField();
binder.forField(textField)
      .withValidator(e -> {
         textField.removeClassName("warn");
         return e.length() > 3;
      }, "You must enter more than 3 characters", ErrorLevel.ERROR)
      .withValidator(e -> {
         textField.addClassName("warn");
         return e.length() > 5;
      }, "Maybe you should enter more than 5 characters", ErrorLevel.WARNING)
      .bind(Person::getName, Person::setName);

这将按binder.validate().isOk()预期工作。例如，当您输入 3 个或更少的字符时，您将看到红色错误消息并binder.validate().isOk()返回false。

当您输入 4 或 5 个字符时，您将看到黄色警告消息并binder.validate().isOk()返回true。

对于蓝色信息消息过程是相同的。只需在 .css 文件中复制“info”类的代码并选择蓝色即可。然后为信息条件创建第三个验证器。不要忘记添加“info”类，并在其他验证器条件（错误、警告）中将其删除。