Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

jQueryでフォーム入力エラー時にブルブルさせてみる

こんばんわ^^

今日も暑かったですね (´Д｀；)
友人からまた泣けるメルが届きました（o´Д｀o）
消去できないメールが来ました

仕事中にメルが届いたので、いつものように合間を見て読んだら･･･気づいたら感情入っちゃいましてウルウルしたら、回りの同僚に心配をかけてしまいました (;￣∇￣A はは

フォーム入力時にエラーした場合、フォームがブルブル震えています。
これはかわいいっ!! ってことで、jQuery で似たようなものを作ってみましたのでご紹介です (●＞∀＜●)／

まずはサンプルですね。

上記サンプルでは iterface.js を使用してます。
Shake というエフェクトを使ってブルブルさせてるだけです (;￣∇￣A

以下に上記サンプルの XHTML 記します。

XHTML

<table>
<tr><td><label for="shake-input">メールアドレス：</label></td>
<td><input type="input" id="shake-input" name="shake-input" value="" /></td>
</tr>
<tr><td colspan="2"><input type="button" value="ぶるぶるテスト" onclick="input_shacker();" /></td></tr>
</table>

ボタンクリックされたら、input_shaker という関数を実行します。
以下がその関数のコードになります。

JavaScript

<script src="<$MTBlogURL$>jquery/jquery.js" type="text/javascript"></script>
<script src="<$MTBlogURL$>jquery/interface/interface.js" type="text/javascript"></script>
<script type="text/javascript">
function input_shacker() {
/ * 未入力かどうかチェックします */
if ('' == $('input#shake-input').val()) {
/* 未入力の場合、ブルブルさせます */
$('input#shake-input').Shake(5)
.focus();
return false;
}
}
</script>