フォームの入力値をチェックするJavascriptライブラリ『Validate.js』-JavaScript Library Archive

フォームの入力値をチェックするJavascriptライブラリ『Validate.js』

Validate.jsはフォームの入力値をバリデーションしてくれるWEBサービスです。

使い方

ダウンロードしてきたValidate.jsをhead要素などで読み込みます。

<script type="text/javascript" src="validatejs.js"></script>

フォームのform要素のonsubmit属性に「return myForm.Apply()」を設定します。

<form id="form1" method="post" action="sendtopage" onsubmit="return myForm.Apply()">

head要素などでnew Validate();を実行してバリデーションの設定を行います。

<fscript type="text/javascript">
var myForm = new Validate();
//バリデーションの設定
</script>

バリデーションの設定は例えば、id属性が「name」のinput要素の値が必須の場合は、

myForm.addRules({id:'name',option:'required',error:'名前：必須です'});

と記述します。errorにはエラーの際に出力されるアラートが設定できます。

メールアドレスの書式をチェックしたい場合はoptionにemailを設定します。

myForm.addRules({id:'email',option:'email',error:'メール：アドレスが不正です'});

URLの書式をチェックしたい場合はoptionにurlを設定します。

myForm.addRules({id:'url',option:'url',error:'url：アドレスが不正です'});

サンプル

他にもoptionには

AlphaLatin：英数
Number:数値
zipCode:郵便番号(日本の郵便番号ではないです)
date:日付

などが存在します。

簡易版のaddRules以外にも個別にチェック用の関数が利用できますのでJavaScriptの知識がある方は、

window.onload = function() {
	document.getElementById("form1").onsubmit = function(){
		var myForm = new Validate();
		if(!myForm.isNotEmpty(document.getElementById("form1").name.value)){
			alert("Empty");
			return false;
		}

		if(document.getElementById("form1").email.value && !myForm.isEMailAddr(document.getElementById("form1").email.value)){
			alert('inValid email');
			return false;
		}

		if(document.getElementById("form1").url.value && !myForm.isURL(document.getElementById("form1").url.value)){
			alert('invalid URL');
			return false;
		}
	}
}

のようにチェック部分だけ抽出して利用することも可能です。

サンプル

サンプルはデフォルトですと書式チェックと必須チェックが同時に行われるのですが、文字入力がされている場合のみ書式チェックを行うバリデーションです。