Custom error with HTML5 input validation

Question

I am trying to show custom error validation messages using Materialize and HTML5 input validation. The error is detected (invalid pseudo-class shows up) but the validation error message isn't displayed.

This example from Materialize works fine (the framework should handle the custom error if the data-error attribute is set):

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

But not one of my fields:

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

Basically, I want the field value to match a regex pattern, only letters in this case.

I assume that I misused the validation data attributes but I don't get how. Or maybe Materialize doesn't handle pattern based errors? Any idea?

Note that the {{_ 'something'}} syntax is just a SpaceBar i18n helper call.

Answer 1

Holy cow, it all happened because I had a lost <br> between my input and my label...