skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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

使用方法
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>

jQueryでフォームの値がない場所を揺らす　via：Animate validation feedback using jQueryサンプル

記事作成：2009年10月02日

前の記事：jQueryでフォントサイズを簡易的に切り替える　via：jQuery Font Resize Demo
次の記事：jQueryでFlashっぽいローディングを表示させられる「QueryLoader – preload your website in style」