綺麗なデザインでフォームを彩るバリデーション付きjQueryプラグイン「Formly」

フォームにデザインを加えてかつバリデーションもつけてしまうjQueryプラグインです。
Formly - The form glamorizer for jQueryを利用することで3種類のテイストの異なるデザインを簡単に適用可能です。

sponsors

使用方法

Formly - The form glamorizer for jQueryからファイルをダウンロード。

<link rel="stylesheet" href="formly.css" type="text/css" /> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="formly.js"></script>
<script type="text/javascript">
$(function() {
	$('#id名').formly({
		'onBlur':false, //マウスオーバーでダイアログを出すか
		'theme':'Light' //指定なし,Light,Darkの3種類
	});
});
</script>
あとは下記のようにformを記述すれば完成です。

<form id="form1" width="400px">
名前: <input type="text" name="your name" /><br />
Email: <input type="text" name="Email" validate="email" /><br />
Username: <input type="text" name="Username" place="必須" label="Username" require="true" /><br />
Password: <input type="password" name="Password1" place="必須" label="Password1" require="true" /><br />
<input type="submit" value="Sign up" /><input type="reset" value="Clear" />
</form> 
inputには下記のルールが適用されます。
・label : 注意文に表示
・place : place holderになります。
・require : 必須(true or false)
・match : 所定の文言とマッチさせる場合
・validate : バリデーション'email' or 'http'

サンプル

Normal

Your name:
Email address:
Username:
Password:

Light

Your name:
Email address:
Username:
Password:

Dark

Your name:
Email address:
Username:
Password:

Javascriptサンプルページ一覧
skuare.net

sponsors