中途半端を極める

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】複数の画像をウィンドウ幅に合わせてカルーセル風に実装(bxslider編)

ウィンドウ幅いっぱいにスライドを表示させたい。 そう思ってもなかなか思うような動作をするjavascriptを見つけるのが困難です。 見つけたとしても、それがレスポンシブに対応するのか否か。 そんなこ …

レスポンシブサイトにPC用とスマホ用の切り替えボタンをつける方法を紹介

最近レスポンシブサイトが増えてきました。スマートフォン用のサイトにはPC用を表示するボタンがついていますが、その機能を実装する方法を紹介いたします。javascriptを使用いたします。

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

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

【javascript】高さをjQueryで取得する時Google Chrome、Safariでうまく動作しない時の対処方

jQueryで高さ(height)を取得する時、IEやFirefoxではうまく動作するけど、Google Chrome、Safariで動作しなくて困ったことは無いでしょうか?高さを調整するようなjav …

【javascript】jQueryとprototypeを共存させる方法

自分が管理していないサイトを突然「更新してくれ!」と言われ、確認するとprototypeが使用されておりました。私は基本的にJavaScriptライブラリはjQueryを使用するので、少々戸惑いました …