jQuery: フォーム部品の入力チェック（バリデーション）

jQueryでフォーム部品の簡単な入力チェックを行います。
必須項目に何も入力されていない場合には、テキストボックスに色を付けます。 そして、入力された時点でテキストボックスの色を白にします。 この入力チェックを最後に一括ではなく、リアルタイムで行うためのロジックです。 動作サンプル、サンプルコード、コード解説の順番で記述しています。

動作サンプル

サンプルを別ページで開く

HTML


<dl>
    <dt>お名前 <span class="red">（必須）</span></dt>
    <dd><input type="text" name="name" value="" class="required"></dd>
    
    <dt>フリガナ</dt>
    <dd><input type="text" name="kana" value=""></dd>
    
    <dt>問い合わせ内容 <span class="red">（必須）</span></dt>
    <dd><textarea name="contents" value="" class="required"></textarea></dd>
</dl>

CSS


dl {
    width: 400px;
    margin-left: 10px;
}
dl dt {
    margin: 15px auto 3px auto;
}
dl dd {
    margin: 0;
}
input[type=text] {
    width: 100%;
    padding: 5px;
    background: white;
    border: 1px solid gray;
}
textarea {
    width: 100%;
    height: 80px;
    padding: 5px;
    background: white;
    border: 1px solid gray;
}
.red {
    color: red;
}

JavaScript


$(function(){
    // .on()
    $('.required').on('keydown keyup keypress focus blur change', function(){
        
        if ($(this).val() == '') {
            $(this).css('background', 'aliceblue');
        }else{
            $(this).css('background', 'white');
        }
    });
    // change() で on('change')を発生させる
    $('.required').change();
    
});

コード解説

クラスで必須項目を管理


<dt>お名前 <span class="red">（必須）</span></dt>
<dd><input type="text" name="name" value="" class="required"></dd>

必須入力項目に対して、class="required"をつけることで管理しています。 チェックするロジック部分では、このクラス名を使ってチェックします。

イベントを複数登録


// .on()
$('.required').on('keydown keyup keypress focus blur change', function(){


});
リアルタイムでの入力チェックなので、複数のイベントを登録しています。 キーボード入力、フォーカスのon/off、changeです。

change()メソッド


// change() で on('change')を発生させる
$('.required').change();

change()メソッドを実行することで、on('change')が発生し、 チェックが実行されます。 これにより入力前の時点でテキストボックスの色が変更されます。 さらに、ページのリロードや画面遷移の場合にも対応できます。

jQuery入門