[JS]フォームのエラー箇所をアニメーションでブルッとさせるスクリプト

フォームのエラー箇所にブルッとしたアニメーションのエフェクトを加えるスクリプトをJanko At Warp Speedから紹介します。

Animate validation feedback using jQuery
demo

デモではフィールドが空の場合にエラーとして、ブルッとしたアニメーションのエフェクトを加えます。

スクリプトのベースにはjQueryが使用されており、下記のスクリプトを記述します。

$("#signup").click(function() {
    var emptyfields = $("input[value=]");
    if (emptyfields.size() > 0) {
        emptyfields.each(function() {
            $(this).stop()
                .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
                .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
                .animate({ left: "0px" }, 100)
                .addClass("required");
        });
    }
});

移動の量やタイミングの調整は数値を変更します。

注意

アニメーションだけでエラーを明示するものではなく、あくまでも補助的にユーザーの注意をひきつけるために使用します。