Materialize best practices

Question

i use this form

<div class="row"> <form class="col s12"> <div class="row"> <div class="input-field col s12"> <input id="email2" type="email" class="validate"> <label for="email2" data-error="wrong" data-success="right">Email</label> </div> <div class="input-field col s12"> <input id="example" name="example" type="text" class="validate" required="" aria-required="true"> <label for="example" data-error="wrong" data-success="right">Field</label> </div> </div> </form> </div> 

The mail box is fine. if I send an error message with the wrong postal address.

The example field does not work. I would check if the field is empty and then show the error.

What's wrong?

Answer 1

You forgot to add required="" and aria-required="true" here is the full snippet:

 <div class="row"> <form class="col s12"> <div class="row"> <div class="input-field col s12"> <input id="email2" type="email" class="validate" required="" aria-required="true"> <label for="email2" data-error="wrong" data-success="right">Email</label> </div> <div class="input-field col s12"> <input id="example" name="example" type="text" class="validate" required="" aria-required="true"> <label for="example" data-error="wrong" data-success="right">Field</label> </div> <div class="input-field col s12"> <button class="btn waves-effect waves-light" type="submit" name="action">Submit</button> </div> </div> </form> </div> 

http://jsfiddle.net/u76rdq2h/

Answer 2

comment by comment ichadhr

/ ** Corrections for error messages * /

 label { width: 100%; } .input-field label:not(.active):after { font-size: 0.8rem; -webkit-transform: translateY(-140%); -moz-transform: translateY(-140%); -ms-transform: translateY(-140%); -o-transform: translateY(-140%); transform: translateY(-140%); }