jquery.validate.jsでフォームの入力チェック

2015.04.10

jquery.validate.jsでフォームの入力チェック

jquery.validate.jsは入力フォームのバリデーション（チェック）を簡単に実装することが出来るjQueryプラグインです。
ダウンロードはこちらからダウンロードします。

勿論ですが、jqueryをプリロードしておく必要があります。

解凍するとdist配下にjquery.validate.min.jsがあるのでこのファイルをプリロードします。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>

body部にformを作成します。

<body>
<!-- コーディング部分 -->
<div>
<form id="testForm" method="post">
<ul>
<li>名前<input name="name" minlength="3" type="text" required /></li>
<li>mail<input name="mail" type="email" required /></li>
<li>URL<input name="url" type="url" required /></li>
</ul>
<input type="submit" name="Submit" value="送信"/>
</form>
</div>
<script>
$("#testForm").validate();
</script>
</body>

最後にformのid属性にvalidate()メソッドを実行しています。これでクライアントサイドでvalidateチェックが行えます。

DEMO

コメント

タイトルとURLをコピーしました