FORMの文字チェックを実装するプラグイン  2010年7月1日

FORMの文字チェックをJavascriptで実行してくれるサイトが増えました。ちょっと自分でも毎回色々持ってくるのが手間なので、若干汎用的に作ってみました。

ダウンロード

http://www.itassist.info/modules/d3downloads/index.php?page=visit&cid=4&lid=3

できる事

  • 必須入力のチェックができる
  • エラーの場合にエラーメッセージを入力欄のそばに表示出来る
  • エラーの場合に指定した入力欄の周りのエリアへクラスを適用できる
  • 「数値」「半角英数」「Email（文字種類のみチェック）」「全角カタカナ」「全角」「最大文字数」「文字数」「（複数の入力欄で）合計の最大文字数」「（複数の入力欄で）合計の文字数」「パスワードなどの２つ以上の入力欄の一致」のチェックができる
  • FORMボタンをクリックした際にエラーがある場合はエラーの場所までジャンプする

といったことができるようにしてあります。

使い方

●先ずJavascriptをheadのところで読み込みます。

<script  type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script  type="text/javascript" src="js/jquery.form.js"></script>

●次に、FORMの入力欄のHTMLを作成するのですが、対象となる入力タグ（input、selectのタグ）に対して、エラーが発生した場合、このプラグインは以下の感じで動作します。（それぞれのクラス名は変更可能です）

  1. 対象の入力タグの親から「showError」というクラス名がセットされているタグを探します。
  2. 「showError」がセットされたタグへ「error-color」というクラスをセットします．
  3. 「showError」がセットされたタグの子供のタグから「errorMsg」というクラス名がセットされているタグを探し、その中にエラーメッセージを表示します．
<div class="showError"> ＜ーーこのタグにerror-colorがセットされます。
    <input  />
    <div class="errorMsg"></div>　＜ーーこのタグにエラーメッセージがセットされます。
</div>

●個々のタグにチェックしたい内容にあわせて属性をセットしてゆきます。（各タグのname属性は任意で構いません）

数字の入力欄の場合

<input type="text" name="input-formMstNumber" class="formMstNumber"/>

のようにクラスに「formMst1byte」をセットします．

半角英数の入力欄の場合

<input type="text" name="input-formMst1byte" class="formMst1byte"/>

のようにクラスに「formMst1byte」をセットします．

Emailの入力欄の場合

<input type="text" name="input-formMstEmail" class="formMstEmail" />

のようにクラスに「formMstEmail」をセットします．

全角カタカナの場合

<input type="text" name="input-formMstKana" class="formMstKana" />

のようにクラスに「formMstKana」をセットします

全角の場合

<input type="text" name="input-formMstZenkaku" class="formMstZenkaku" />

のようにクラスに「formMstZenkaku」をセットします

最大3文字（文字数は変更可能)の場合

<input type="text" name="input-formCnt" class="formCnt" formcnt="3" />

のようにクラスに「formCnt」をセットします。
また、「formcnt=?」の「？」のところに文字数を指定します。

3文字（文字数は変更可能)の場合

<input type="text" name="input-formJustCnt" class="formJustCnt" formcnt="3" />

のようにクラスに「formJustCnt」をセットします。
また、「formcnt=?」の「？」のところに文字数を指定します。

合計最大5文字以内（文字数は変更可能)の場合

<input type="text" name="input-formGroupCnt1" class="formGroupCnt" formcnt="5" formgroup="testgroup" />
<input type="text" name="input-formGroupCnt2" class="formGroupCnt" formcnt="5" formgroup="testgroup" />

のようにクラスに「formGroupCnt」をセットし、「formcnt=?」の「？」のところに文字数を指定します。
また、formgroupに合計する対象のタグで同じ値のグループ名（任意）を指定します。

合計5文字以内（文字数は変更可能)の場合

<input type="text" name="input-formGroupCnt1" class="formGroupJustCnt" formcnt="5" formgroup="testgroup2" />
<input type="text" name="input-formGroupCnt2" class="formGroupJustCnt" formcnt="5" formgroup="testgroup2" />

のようにクラスに「formGroupCnt」をセットし、「formcnt=?」の「？」のところに文字数を指定します。
また、formgroupに合計する対象のタグで同じ値のグループ名（任意）を指定します。

２つの入力欄がいっちする場合

<input type="text" name="input-formGroupDiff1" class="formGroupDiff" formdiffgroup="testgroup3" />
<input type="text" name="input-formGroupDiff2" class="formGroupDiff" formdiffgroup="testgroup3" />

のようにクラスに「formGroupDiff」をセットます。
また、formdiffgroupに一致する対象のタグで同じ値のグループ名（任意）を指定します。

●FORMをSUBMITするボタンをセットします。
ここではボタンですがimgタグでも
「input type=”img”」でも、どのタグでも構いません。onclickイベントにデータのチェックとSubmitが追加されます．

<input type="button" name="button" value="送信" id="btnNext" />

※この時inputタグのID属性やname属性に「submit」という名前を使わないでください．jQueryの仕様なのかうまくフォームをSubmitできません。

●最後にヘッダー内で、必須項目をセットしながらjQueryのプラグインを呼び出します．
引数の「defaultMstList」にフォーム内でチェックしたいすべての項目のname属性を順番に記載し、必須の場合は「true」、必須ではない場合は「false」をセットします．

$(document).ready(function(){
	$('#formtest').checkMstForm({
		defaultMstList: {
			"input-formMstNumber": true,
			"input-formMst1byte": true,
			"input-formMstEmail": true,
			"input-formMstKana": true,
			"input-formMstZenkaku": true,
			"input-formCnt": true,
			"input-formJustCnt": true,
			"input-formGroupCnt1": true,
			"input-formGroupCnt2": true,
			"input-formGroupJustCnt1": true,
			"input-formGroupJustCnt2": true,
			"input-formGroupDiff1": true,
			"input-formGroupDiff2": true
		}
	});
});</script>

以下のようなHTMLを記載すると

$(document).ready(function(){
	$('#formtest').checkMstForm({
		defaultMstList: {
			"input-formMstNumber": true,
			"input-formMst1byte": true,
			"input-formMstEmail": true,
			"input-formMstKana": true,
			"input-formMstZenkaku": true,
			"input-formCnt": true,
			"input-formJustCnt": true,
			"input-formGroupCnt1": true,
			"input-formGroupCnt2": true,
			"input-formGroupJustCnt1": true,
			"input-formGroupJustCnt2": true,
			"input-formGroupDiff1": true,
			"input-formGroupDiff2": true
		}
	});
});</script>
<style type="text/css"> <!--
.error-color {
	background-color: red;
}
--></style>

<form action="./" method="post" id="formtest">
	<div class="showError">
		数字
		<input type="text" name="input-formMstNumber" class="formMstNumber" />
		<div class="errorMsg"></div>
	</div>
	<div class="showError">
		半角英数
		<input type="text" name="input-formMst1byte" class="formMst1byte"/>
		<div class="errorMsg"></div>
	</div>
	<div class="showError">
		Email
		<input type="text" name="input-formMstEmail" class="formMstEmail"/>
		<div class="errorMsg"></div>
	</div>
	<div class="showError">
		全角カタカナ
		<input type="text" name="input-formMstKana" class="formMstKana"/>
		<div class="errorMsg"></div>
	</div>
	<div class="showError">
		全角
		<input type="text" name="input-formMstZenkaku" class="formMstZenkaku"/>
		<div class="errorMsg"></div>
	</div>
	<div class="showError">
		最大3文字（文字数は変更可能)
		<input type="text" name="input-formCnt" class="formCnt" formcnt="3" />
		<div class="errorMsg"></div>
	</div>
	<div class="showError">
		3文字（文字数は変更可能)
		<input type="text" name="input-formJustCnt" class="formJustCnt" formcnt="3" />
		<div class="errorMsg"></div>
	</div>
	<div class="showError">
		合計5文字以内（文字数は変更可能)
		<input type="text" name="input-formGroupCnt1" class="formGroupCnt" formcnt="5" formgroup="testgroup" />
		<input type="text" name="input-formGroupCnt2" class="formGroupCnt" formcnt="5" formgroup="testgroup" />
		<div class="errorMsg"></div>
	</div>
	<div class="showError">
		合計5文字（文字数は変更可能)
		<input type="text" name="input-formGroupJustCnt1" class="formGroupJustCnt" formcnt="5" formgroup="testgroup2" />
		<input type="text" name="input-formGroupJustCnt2" class="formGroupJustCnt" formcnt="5" formgroup="testgroup2" />
		<div class="errorMsg"></div>
	</div>
	<div class="showError">
		２つの入力欄がいっちすること
		<input type="text" name="input-formGroupDiff1" class="formGroupDiff" formdiffgroup="testgroup3"/>
		<input type="text" name="input-formGroupDiff2" class="formGroupDiff" formdiffgroup="testgroup3" />
		<div class="errorMsg"></div>
	</div>
	<input type="button" name="button" value="送信" id="btnNext" />
</form>

こんな感じになります。

数字

半角英数

Email

全角カタカナ

全角

最大3文字（文字数は変更可能)

3文字（文字数は変更可能)

合計5文字以内（文字数は変更可能)

合計5文字（文字数は変更可能)

２つの入力欄がいっちすること

エラーの時の色やフォント、レイアウトはCSSで自由に設定可能です。
引数は他に以下のようになっています．
nextButton: ‘#btnNext’, // SubmitするタグのID属性
errorMsgMst: ‘必須項目です。’,　// 必須項目に未入力の場合のエラー
errorMsgMstNumber: ‘数値で入力してください。’,　// 数値入力欄に数値以外が入力された場合
errorMsgMst1byte: ‘半角英数で入力してください。’, // 半角英数欄に半角英数以外が入力された場合
errorMsgMstEmail: ‘Emailに利用できない文字があります。’,　// Email入力欄に利用できない文字が入力された場合
errorMsgMstKana: ‘全角カナで入力してください。’,　// 全角カナ入力欄に全角カナ以外が入力された場合
errorMsgMstZenkaku: ‘全角で入力してください。’,　// 全角入力欄に全角以外が入力された場合
errorMsgCnt: ‘%maxCnt%文字以内で入力してください。’,　// 最大文字数をオーバーした場合
errorMsgJustCnt: ‘%justCnt%文字で入力してください。’,　// 文字数が指定文字数と一致しない場合
errorMsgGroupCnt: ‘合計%maxCnt%文字以内で入力してください。’,　// 合計最大文字数をオーバーした場合
errorMsgGroupJustCnt: ‘合計%justCnt%文字で入力してください。’,　// 合計文字数が指定文字数と一致しない場合
errorMsgGroupDiff: ‘入力内容が一致しません。’,　// 入力欄の内容が一致しない場合
defaultMstList: {}, // 必須項目リスト　例）{ “aaa”: true, “bbb”: false }
encoding: ‘utf-8′, // utf-8 or s-jis（全角のチェックなどで利用されます）
showErrorClass: “.showError”, // エラーメッセージ表示位置を探す際の親クラス
errorMsgClass: “.errorMsg”, // エラーメッセージを表示するクラス
backgroundColorClass: “error-color”, // エラー発生時にshowErrorClassにクラスを適用する場合

このエントリをはてなブックマークに登録 このエントリをBuzzurlにブックマーク Yahoo!ブックマークに登録 このエントリをlivedoorクリップに登録 Deliciousにブックマーク
カテゴリ：　jQuery javascript　

タグ:　,

コメントを投稿