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

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

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

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

sponsors

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

記事作成:
記事URL:

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