HTML5 输入验证的自定义错误

Question

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

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

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

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

我假设我误用了验证数据属性，但我不明白是怎么回事。或者也许 Materialise 不处理基于模式的错误？有什么想法吗？

请注意，{{_ 'something'}} 语法只是一个空格键 i18n 帮助程序调用。

Answer 1

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

HTML5 输入验证的自定义错误

Custom error with HTML5 input validation

html

validation

user-input

materialize