jQueryでフォームの入力項目をリアルタイムでチェックする
エントリーフォームをリアルタイムでチェックするメモ的忘備録です。
フォーカスが外れた時の入力判定はblur
フォーカスが外れた時に項目が空ならテキストフィールドが薄い赤色、入力されていれば薄い青色になります。
|
1 2 3 4 5 6 7 |
$("input[name='お名前']").blur(function(){ if($(this).val() == ""){ $(this).css("background-color", "#FEF4F8"); }else{ $(this).css("background-color", "#FaFEFF"); } }); |
入力中の判定はkeyup
keyupを使えば入力中の判定ができます。キーが押され上がった時に処理が実行されます。
|
1 2 3 4 5 6 7 |
$("input[name='お名前']").keyup(function(){ if($(this).val() == ""){ $(this).css("background-color", "#FEF4F8"); }else{ $(this).css("background-color", "#FaFEFF"); } }); |
セレクトボックスはchange
セレクトボックスではkeyupが思ったような動作にならないのでchangeを使います。
|
1 2 3 4 5 6 7 |
$("select[name='都道府県']").change(function(){ if($(this).val() == ""){ $(this).css("background-color", "#FEF4F8"); }else{ $(this).css("background-color", "#FaFEFF"); } }); |
メールアドレスのチェック
メールアドレスの形式かチェック
|
1 2 3 4 5 6 7 8 9 |
var mailcheck = /^[\w_-]+@[\w\.-]+\.\w{2,}$/; $(input[name='メールアドレス']).keyup(function(){ if($(this).val().match(mailcheck)){ $(this).css("background-color", "#FaFEFF"); }else{ $(this).css("background-color", "#FEF4F8"); } }); |
- 2014年05月18日日曜日
- ：Naruhiko Wakai
comments