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>
jQueryでフォームの値がない場所を揺らす via:Animate validation feedback using jQueryサンプル
sponsors
「jQueryでフォームの値がない場所を揺らす via:Animate validation feedback using jQuery」をシェアする
記事作成:2009年10月 2日 17:10
記事URL:http://www.skuare.net/2009/10/jqueryviaanimate_validation_fe.html
TOP > javascript > フォーム関連 > jQueryでフォームの値がない場所を揺らす via:Animate validation feedback using jQuery
前の記事:jQueryでフォントサイズを簡易的に切り替える via:jQuery Font Resize Demo
次の記事:jQueryでFlashっぽいローディングを表示させられる「QueryLoader – preload your website in style」
あなたにはこちもお勧め!
jQuery プラグインまとめ!