jQueryでフォームの値がない場所を揺らす via:Animate validation feedback using jQuery

フォームに未入力項目があった場合、背景に色をつけたり、枠線の色を変えたりします。
今回はさらに目立たせるため、揺らしてみることにします。
via:Animate validation feedback using jQuery

sponsors

使用方法

jQueryからjquery.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
            $("#id名").click(function() {
                resetFields();
                var emptyfields = $("input[value=]"); //inputにvalueがないのを取得
                if (emptyfields.size() > 0) { 
                    emptyfields.each(function() {
                        $(this).stop()
                            .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100) //左右に10px
                            .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100) //左右に10px揺らします
                            .animate({ left: "0px" }, 100) //で、戻します
                            .addClass("required"); //クラス"required"を付けます
                    });
                }
            });
        });
        function resetFields() {
            $("input[type=text], input[type=password]").removeClass("required"); //リセットします
        }
</script>
上記を記述後、通常通りinputを書き込めば完成です。

<input type="text" value="" id="name" name="name" /> 
<a id="id名" href="#">送信</a>

サンプル


送信 リセット
Javascriptサンプルページ一覧
skuare.net