web-dev-qa-db-fra.com

matérialiser les meilleures pratiques valider un champ vide

j'utilise ce formulaire 

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

le champ mail est ok. si je poste dans une adresse mail incorrecte, un message d'erreur apparaît.

exemple domaine ne fonctionne pas. Je voudrais vérifier si le champ n'est pas vide et ensuite montrer une erreur.

Qu'est-ce qui ne va pas?

htmlhtml5validationmaterial-designmaterialize
5
ciro

Vous avez oublié d'ajouter required="" et aria-required="true" . Voici l'extrait complet:

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

13
ichadhr

commentaire à ichadhr's comment

/ ** FIXES pour les messages d'erreur * / 

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%);
}
0
Gabriel White