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

Question

使用 Vaadin 14.1.23 TextFields 我想在视觉上区分红色错误消息（例如 "This value is too big."）和黄色警告（例如 "System will round your input to two decimals."）。并且可以选择蓝色信息消息。

因此我创建了一个带有验证器的 TextField，如本示例 (https://vaadin.com/components/vaadin-text-field/java-examples/validation )：当您在带有标签 "Min 2 characters" 的字段中键入“1”时，该字段会变为红色并显示错误: "Minimum 2 characters".

如何显示这样的（黄色）警告消息？

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

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

但是 Vaadin 仍然生成了一个 div with part="error-message":

<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 创建主题。在 frontend/styles 文件夹中创建 text-field-theme.css 文件，内容为：

: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;
}

用这段代码你说：当文本字段有 class "warn" 错误消息是橙色的，输入字段周围的框是橙色的，输入字段背景是透明的 (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() 将 return false。

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

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

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

Vaadin 14: Mark error message at TextField as warning

vaadin

vaadin-flow

vaadin10