web-dev-qa-db-ja.com

空のフィールドを検証するベストプラクティスを具体化する

私はこのフォームを使います

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

メールフィールドはOKです。間違ったメールアドレスで投稿するとエラーメッセージが表示されます。

例のフィールドは機能しません。フィールドが空でないかどうかを確認し、エラーを表示します。

どうしましたか？

htmlvalidationmaterial-designmaterialize
6
ciro

追加するのを忘れたrequired=""およびaria-required="true"これが完了スニペットです。

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

16
ichadhr

ichadhr'sへのコメント

/ **エラーメッセージの修正* /

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