JSFiddle - React, Tailwind, and code Playground

by Matsunaga_Ajike

HTML

<form action="" method="post">
    <label for="input">
        <span class="u-ml10 u-red u-fwb">必須</span>
        お名前
    </label>
    <br>
    <input id="input" class="validate" type="text" name="name" maxlength="10" value="" placeholder="10文字以内で入力">
    <span class="errorMessage u-red u-fwb u-dpn">お名前を入力してください</span>

    <br>

    <label for="input2">
        <span class="u-ml10 u-red u-fwb">必須</span>
        住所
    </label><br>
    <input id="input2" class="validate" type="text" name="address" maxlength="20" value="" placeholder="20文字以内で入力">
    <span class="errorMessage u-red u-fwb u-dpn">住所を入力してください</span>

    <br>

    <label for="memo">
        <span class="u-ml10 u-red u-fwb">必須</span>
        ご意見
    </label>
    <br>
    <textarea id="memo" class="validate" name="memo" rows="4"></textarea>
    <span class="errorMessage u-red u-fwb u-dpn">ご意見を入力してください</span>
    <br>
    <input type="submit" value="送信する">
</form>

CSS

.u-red {
    color: #ffcccc;
}

.u-fwb {
    font-weight: bold;
}

.u-dpn {
    display: none;
}

.u-ml10 {
    margin-right: 10px;
}

JavaScript

$(function() {
    $('.validate').focusout(function(e) {
        var userData = $(this).val();

        // 空のとき
        if (userData === '') {
            $(this).css('background-color', '#ffcccc');
            $(this).next('.errorMessage').css('display', 'block')
        }
    });
});