中途半端を極める

web関連で役に立ちそうなものを紹介いたします

javascript

[javascript]exvalidation.jsが動作しない時必見!代わりとなるjavascriptを紹介

投稿日:

jqueryのバージョンによってはexvalidation.jsが動作しない場合があります。
※特に新しいバージョンのjqueryを使用しているときに動作しなくなった方が多いのではないでしょうか?
動作しなくて困ったという方にオススメできるjavascriptを紹介いたします。

jquery.validate.js

利用方法

jQuery本体と配布元よりダウンロードし、読み込みます。
http://jqueryvalidation.org/

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

バリデーションを行いたいのが次のようなHTMLの場合、

<form method="post">
	<ul>
		<li>名前 <input name="name" type="text" /></li>
		<li>メール <input name="mail" type="text" /></li>
		<li>url <input name="url" type="text" /></li>
	</ul>
	<input type="submit" name="Submit" value="Submit"/>
</form>

JavaScriptで次のようの設定を行うとバリデーションを実装することが出来ます。

<script type="text/javascript">
$(function(){
	$("form").validate({
		rules: {
			name :{
				required: true
			},
			mail :{
				required: true,
				email: true
			},
			url :{
				required: true
			}
		},
		messages: {
			name :{
				required: "お名前を入力してください"
			},
			mail :{
				required: "メールアドレスを入力してください",
				email: "正しいメールアドレスを入力してください"
			},
			url :{
				required: "URLを入力してください"
			}
		}
	});
})
</script>

-javascript

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

[javascript]複数の要素の高さを揃えるjavascript利用時にうまく動作しない時の対処法

「EqualHeight」や「flatheights」など複数の要素の高さを揃えるjavascriptを使用すると、SafariとGoogle Chromeではうまく動作しない場合があります。 うまく …

Google Maps API V2であまりソースを変更せずV3へ移行する方法

注: Google Maps JavaScript API バージョン 2(V2)は、2010 年 5 月 19 日に正式にサポートが終了しました。V2 の廃止スケジュールは 2013 年 5 月 1 …

【Javascript】div要素のブロック全体をリンクにする

ブロック要素全体をリンクにすることができるjQueryです。 要素全てリンクにしたいとき、Validator errorが出る時に使用すると有効です。

【Javascript】IE6でもpng画像を使えるようにする

IE6でpng画像を使うと、透明部分が灰色になって正常に表示されません。 IE6でも正常に表示させるためには「DD_belatedPNG」というライブラリを利用します。 img要素やCSSでの背景(背 …

jQueryを使ってボックス要素をランダムに表示する方法

一部の要素をランダムに表示させたいという要望があったので、調べてみたところ、よさそうなjavascriptがあったので紹介いたします。結構手軽だったので活用できるシーンは多いのではないでしょうか。