HTML5 输入验证的自定义错误

Question

我正在尝试使用 Materialize 和 HTML5 输入验证来显示自定义错误验证消息。检测到错误（出现invalid 伪类），但未显示验证错误消息。

这个来自 Materialize 的例子工作正常（如果设置了 data-error 属性，框架应该处理自定义错误）：

      <div class="input-field col s12">
        <input id="email" type="email" class="validate">
        <label for="email" data-error="wrong" data-success="right">Email</label>
      </div>

但不是我的领域之一：

 <div class="input-field col s12 m6">
      <input id="firstname" 
             type="text" 
             min-length="2"
             max-length="25" 
             pattern="^[a-zA-Z]+$" 
             class="validate" 
             required autofocus><br>
      <label for="firstname" 
             data-error="{{_ 'user_register_error_bad_firstname'}}" 
             data-success="ok">{{_ "first_name"}}</label>
  </div>

基本上，我希望字段值匹配正则表达式模式，在这种情况下只匹配字母。

我假设我滥用了验证数据属性，但我不明白如何。或者 Materialize 可能不处理基于模式的错误？有什么想法吗？

请注意，{{_ 'something'}} 语法只是一个 SpaceBar i18n 助手调用。

Answer 1

天哪，这一切都是因为我在输入和标签之间丢失了<br>...