Materialize: Input Errors are not correctly displayed, when input has no focus

[Sabartius]

I tried using the new Input Errors, but currently they are no use. When the input does not have the focus, but an Error, the error-text floats over another input, as seen in the picture.

[Clemzd]

Could you share your code with us please?
I can't see anything about input errors for materialize on the web page.

[Sabartius]

That's inside my form:

<div class="input-field col s12">
    <input class="invalid" required id="familienname" type="text">
    <label for="familienname" data-error="fehler">Familienname</label>
</div>

<div class="input-field">
    <input class="invalid" required id="vorname" type="text">
    <label for="vorname">Vorname</label>
</div>

The input-errors are new with Version 0.97 of materialize

[BooBSD]

data-error and <textarea> also do not work correctly.

[d4be4st]

also if label is shorter in width than error message you get something like this:

<div class="input-field col s12">
  <input id="email" type="email" class="validate invalid">
  <label for="email" data-error="must be a valid email" data-success="right" class="active">Email</label>
</div>

[WalterInSH]

I've encountered all of the issues above. Looking forward to finding a solution

[charleshan]

I have the same problem of the limited length of the feedback message.

[charleshan]

Fix for the error width is included here: #1690

[evamichalcak]

This solution flickers a little, but is consistent with the general label design:

input:not([type]).invalid+label:after, 
input:not([type]):focus.invalid+label:after, 
input[type=text].invalid+label:after, 
input[type=text]:focus.invalid+label:after, 
input[type=password].invalid+label:after, 
input[type=password]:focus.invalid+label:after, 
input[type=email].invalid+label:after, 
input[type=email]:focus.invalid+label:after, 
input[type=url].invalid+label:after, 
input[type=url]:focus.invalid+label:after, 
input[type=time].invalid+label:after, 
input[type=time]:focus.invalid+label:after, 
input[type=date].invalid+label:after, 
input[type=date]:focus.invalid+label:after, 
input[type=datetime].invalid+label:after, 
input[type=datetime]:focus.invalid+label:after, 
input[type=datetime-local].invalid+label:after, 
input[type=datetime-local]:focus.invalid+label:after, 
input[type=tel].invalid+label:after, 
input[type=tel]:focus.invalid+label:after, 
input[type=number].invalid+label:after, 
input[type=number]:focus.invalid+label:after, 
input[type=search].invalid+label:after, 
input[type=search]:focus.invalid+label:after, 
textarea.materialize-textarea.invalid+label:after, 
textarea.materialize-textarea:focus.invalid+label:after{
  top: 26px;
  transition: .2s ease-out;
}
input:not([type]).invalid+label.active:after, 
input:not([type]):focus.invalid+label.active:after, 
input[type=text].invalid+label.active:after, 
input[type=text]:focus.invalid+label.active:after, 
input[type=password].invalid+label.active:after, 
input[type=password]:focus.invalid+label.active:after, 
input[type=email].invalid+label.active:after, 
input[type=email]:focus.invalid+label.active:after, 
input[type=url].invalid+label.active:after, 
input[type=url]:focus.invalid+label.active:after, 
input[type=time].invalid+label.active:after, 
input[type=time]:focus.invalid+label.active:after, 
input[type=date].invalid+label.active:after, 
input[type=date]:focus.invalid+label.active:after, 
input[type=datetime].invalid+label.active:after, 
input[type=datetime]:focus.invalid+label.active:after, 
input[type=datetime-local].invalid+label.active:after, 
input[type=datetime-local]:focus.invalid+label.active:after, 
input[type=tel].invalid+label.active:after, 
input[type=tel]:focus.invalid+label.active:after, 
input[type=number].invalid+label.active:after, 
input[type=number]:focus.invalid+label.active:after, 
input[type=search].invalid+label.active:after, 
input[type=search]:focus.invalid+label.active:after, 
textarea.materialize-textarea.invalid+label.active:after, 
textarea.materialize-textarea:focus.invalid+label.active:after{
  top: 60px;
  transition: .2s ease-out;
}

[fega]

A workaround could be

 $(document).ready(function() {
     $( "#familienname" ).focus();
  });

[Dogfalo]

Fixed in the forms update in 1.0 alpha