中途半端を極める

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】でphpのincludeやrequireのような動作をJavascriptで実現する方法

サブカラムやフッターなど他のページで使いまわすような要素はincludeやrequire、SSIなどで外部ファイルを読み込んで対応している人は多いかと思われます。実際そっちの方が更新も楽ですし、ケアレ …

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

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

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

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

【javascript】西暦を自動的に更新されるようにjavascriptで表示する

今回は西暦を自動的に更新されるようにできるjavascriptをメモしておきます。 ・現在の西暦を自動的に取得する方法。 ・最終更新日の西暦を取得する方法。 2パターンあります。 コピーライトの部分と …

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

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