Benutzerdefinierter Fehler bei der HTML5-Eingabeüberprüfung

Question

Ich versuche, benutzerdefinierte Fehlerüberprüfungsnachrichten mithilfe der Materialise- und HTML5-Eingabeüberprüfung anzuzeigen. Der Fehler wird erkannt (invalid Pseudoklasse wird angezeigt), aber die Validierungsfehlermeldung wird nicht angezeigt.

Dieses Beispiel von Materialise gut funktioniert (der Rahmen sollte die benutzerdefinierten Fehler, wenn das Daten-Fehler Attribut Griff gesetzt):

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

Aber nicht einen meiner Felder:

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

Grundsätzlich Ich möchte, dass der Feldwert einem Regex-Muster entspricht, in diesem Fall nur Buchstaben.

Ich nehme an, dass ich die Validierungsdaten-Attribute missbraucht habe, aber ich verstehe nicht wie. Oder verarbeitet Materialise möglicherweise keine patternbasierten Fehler? Irgendeine Idee?

Beachten Sie, dass die Syntax {{_ 'something'}} nur ein SpaceBar i18n-Hilfsaufruf ist.

Answer 1

Heilige Kuh, das alles passiert ist, weil ich ein <br> zwischen meiner Input und meinem Label verloren hatte ...