入力フォームの 必須項目チェック用スクリプト 汎用版

入力フォームの各種エレメントを、指定(設定)した方法で入力のチェックをします。
INPUT,TEXTAREA,SELECT,RADIO,CHECKBOXに対応していて、SELECTのmultiple、複数CHECKBOX項目などにも対応。

また、メールアドレス、ホームページアドレスの形式チェック(あまり厳密ではない)や、 英数半角、半角数字 のみ、英数半角禁止、半角カナ禁止、ひらがなのみ等の項目チェックが可能です。

エラーお知らせ用の色変更はINPUTやTEXTAREA以外にも適用する為に エレメントの背景色では無く囲んでるエリアの背景色や、別のエリアなど、ID指定で好きなように設定可能です。 背景色以外の文字色変更などにする場合は、スクリプト内の部分変更が必要)
メッセージで知らせる機能も『各項目ごとに』と『1箇所にまとめて』などが設定できます。

汎用にしたのと、配布用と言う事でエラーがでにくくした為に、フォームチェックにしてはちょっとスクリプトが大きいです。 すっきりさせる為には外部ソースファイルとして読み込ませて使ってください。



汎用スクリプト


■サンプル 1 sample1.htm
スクリプトも含まれるサンプルフォームのHTMLファイル。
このままコピーするなどして使ってください。

■ File DownLoad  =>    formcheck.zip  

formcheck.js というファイルがデフォルトのファイルです。
sample.htmとsample.jsはサンプルです。


使用説明 フォーム編 (必読)

フォームは自由に作れますが、エラー表示に関してはルールがあります。
ルールを無視してもエラーはでませんが機能は使えません。
また2箇所必ずIDが必要な場所があります。

■基本的フォーム

フォームに必ずIDをつけてください。これがスクリプト側の設定1のフォームのIDになります。 JavaScriptでのフォームチェックを必ず通す場合は場合はフォームタグにaction属性を付けません。
JavaScriptがOFF(ノーチェック送信)の場合を許可するなら普通のフォームの様に action = "送信先" をFormタグに付けます。
また、送信ボタンにも必ずIDをつけてください。これがスクリプト側の設定2の送信ボタンのIDになります。

<form id="myform" method="post">

名前:<input type="text" name="fname" value="">
年齢:<input type="text" name="fage" value="">

<input id="sendbtn" type="submit" value="送 信">
<input type="reset" value="リセット">

</form>

こうなります。
名前: 年齢:

この様に普通のフォームのFormタグに
id="myform"
などのIDを付けてください。

Submitボタン、またはボタンに
id="sendbtn"
などのIDを付けてください。
(IDをsubmitと言う名前にするのは避ける事)

これでJavaScriptの方の設定をすると、フォームチェック機能は使える状態になります。 が、エラー表示機能がないと送信できない理由がわからないので、続けてエラー表示の方法です。 XHTMLの方は 空タグを / で閉じてください。


[ フォームエレメントの約束事 ]

valueを省略する事も可能なエレメントもありますが、 省略はせずに必ずvalue属性も使用してください。(空でも)

<input type="radio" name="fsex" value="female">女性
<input type="radio" name="fsex" value="male">男性

<input type="checkbox" name="fkiyaku" value="accept">規約に同意する

<select name="fadr">
<option value="">選択してください</option>
<option value="tokyo">東京</option>
<option value="kanagawa">神奈川</option>
<option value="chiba">千葉</option>
</select>
selectのoptionに関しては『選択してください』の様な案内用表示に関しては、 必ずvalueを空にして下さい。

■エラー 背景色変更

入力エラーを背景色を変えてお知らせする事ができます。

この機能を使う場合は
エレメントのname + _outerと言うIDの場所を作ります。
例えばこのサンプルで名前部分のエラーを色変更で知らせる場合は、名前用のINPUTがfnameと言う名前なので fname_outerというIDの場所を作ります。
ID指定なのでレイアウトに合わせて何処でもOKです。

例:項目名に付けてみます。
<form id="myform" method="post" >

<span id="fname_outer">名前:</span>
<input type="text" name="fname" value="">

<span id="fage_outer">年齢:</span>
<input type="text" name="fage" value="">

<input id="sendbtn" type="submit" value="送 信" >
<input type="reset" value="リセット">

</form>
nameと対応させているのがわかりますね。
色が無い時の見た目は同じです。
エラーが出るとこうなります。
名前: 年齢:

この例では項目名を囲むSPANを色換えする場所として選んでいますが、 INPUTボックスまで含んで全体を囲むなどする事ももちろん可能です。 自分なりのフォームデザインでユーザーにわかりやすい場所を考えてください。
このエラーの色表示機能を使わない場合は、このID(name属性_outer)と言う部分を作らなければ、この機能は無視されます。 場所がある場合のみ、色を変える様にできています。


■エラー メッセージ表示 総合表示

入力エラーを1箇所のメッセージ表示エリアに表示させる事ができます。

『全てのエラーを表示する』『最初に見つかったエラーだけを表示する』
どちらも可能です。
フォーム外でもどこでも都合の良い場所に、 errormsgと言うIDのエリアを作ってください。 基本的にレイアウトが動かないように、高さ指定できるDIVやテーブルなどタグが良いでしょう。

<form id="myform" method="post">

<span id="fname_outer">名前:</span>
<input type="text" name="fname" value="">

<span id="fage_outer">年齢:</span>
<input type="text" name="fage" value="">

<input id="sendbtn" type="submit" value="送 信" >
<input type="reset" value="リセット">

</form>

<div id="errormsg" style="height:20px; color:#cc0000;"> </div>
下側にDIVで高さ20pxを取ったエラースペースが増えました。
エラーの場合はそこにメッセージが表示されます。
(この例は背景色変更を併用)
名前: 年齢:
ここ1箇所にエラーメッセージが表示される(単数・複数 切替可能)

スクリプト側の設定でこの1箇所に全てのエラーを全部表示する事も可能ですし、最初に見つかったエラーだけを表示する事も可能です。
どこでも自分の好きな場所に作ってください。
この機能を使いたくない場合は、errormsgと言うIDのエリアを作らなければ、 スクリプト側でこの機能を無視します。


■エラー メッセージ表示 個別表示

入力エラーを各項目ごとに設置した分だけ個別表示させる事ができます。

場所はとりますが、一番親切な方法です。
この機能を使う場合は
エレメントのname + _msgと言うIDの場所を作ります。
例えばこのサンプルで名前部分のエラーを文字で知らせる場合は、名前用のINPUTがfnameと言う名前なので fname_msgというIDの場所を作ります。
ID指定しているので構造に関係なく好きな場所に作ってください。

<form id="myform" method="post" >

<span id="fname_outer">名前:</span>
<input type="text" name="fname" value="">
<span id="fname_msg" class="err"></span>

<br>

<span id="fage_outer">年齢:</span>
<input type="text" name="fage" value="">
<span id="fage_msg" class="err"></span>

<br>
<input id="sendbtn" type="submit" value="送 信" >
<input type="reset" value="リセット">

</form>
<style tyle="text/css">.err { color:#cc0000; }</style>
エラー表示は色付きの文字の方が良いのでclass指定とCSSで色も付けてます。
エラー1箇所表示のDIVは外しました。
エラーの場合は各項目用の場所にそれぞれメッセージが表示されます。
(この例は背景色変更を併用)
名前: 名前のエラーメッセージ
年齢: 年齢のエラーメッセージ

これでフォームは完成です。
エラー表示方法を、『カラー表示』、『1箇所表示』、『個別表示』のうち好きなものを付けてください。 プランニング中は全部付けて自分のイメージに合う物を見つけてみるのも良いでしょう。
スクリプトの設定をする前に、必要な項目など全てのフォームレイアウトを完成させてしまった方が良いでしょう。


■エラー表示 例外編

通常のフォームエレメントは固有の名前(name)ですし、 ラジオボタンにしても複数で同じnameを使用して単一選択です。 Selectをmultipleにした場合でもnameは一つです。
ですから通常は name に対して name_outer(色変更用)、name_msg(個別メッセージ用) と言う場所を作る時に迷いません。

チェックボックスの場合は、単独でチェックの ON/OFFを求める物であれば問題ありませんが、 時々使われる方法として下記のような場合があります。

使用してるポータルサイトをいくつでも選択:
Yahoo Infoseek MSN Excite Goo
こういった場合は、それぞれに違うnameが付くのでこの項目を代表する name と言うものが存在しません。 その場合は自分なりに、この項目全体の name を自分の中で決めておいて下さい。
例えば、ここなら portal とか。
それを元にして portal_outer、portal_msg と言うIDのエラー表示場所を作ってください。
ココで決めたname(例だとportal)は、HTML上では使いませんが、 これをスクリプト内で設定する事で、このグループ項目のエラーを取り扱う事ができます。

こういった特殊なケースの場合は、スクリプトの設定8の設定が必ず必要です。


使用説明 スクリプト設定 (必読)

スクリプトの設定は、この解説を読みながら行えば難しくないですが、 独自の決め事があるので解説抜きでは無理だと思います。
JavaScript部分をエディタで開いてください。

設定項目は普通の代入方式ではなく、オブジェクトデータの変更なので

項目名:'設定内容'

と言う形になります。
項目名と設定内容(値)はコロンで区切られ、行末に『 ; 』は不用です。


■設定1 フォームID

フォームタグにつけたIDを設定1に登録します。

id:'myform'


■設定2 送信ボタンのID (submitと言うIDは使わない事)

type="submit"でもtype="button"でも構いません。

btn:'sendbtn'


■設定3 最初にフォーカスをあてるフォームエレメントの name。

不要であれば登録せずに '' にしておいてください。

first:'fname'


■設定4 送信先

通常フォーム(form)のactionで使う時の送信先URIです。

action:'./result.php'


■設定5 エラー表示の色

エラー表示 背景色変更機能で使用する色です。

errcol:'#ffeeee'

この様に色をシングルクォーテーションで囲んでください。
文字色の変更までを設定に入れてないので、文字がある場所の背景色を変更する場合は文字色とのコントラストも考えて設定してください。 背景色変更機能を使わない場合は設定不要ですが、一応設定しておく事を薦めます。(あとで勘違いしやすいので)


■設定6 背景色変更した色を戻す場合の元の色

元の背景色です。

defcol:'#ffffff'

この様に色をシングルクォーテーションで囲んでください。
または '' の様に空の状態にしてもOKです。


■設定7 エラー表示で 1箇所固表示 を使う場合

表示するメッセージ が全部なら1、最初の1個だけなら0にします。

msgtype:0

ここはシングルクォーテーションを使わず、数字だけを書いてください。


■設定8 入力チェックをする必須項目の登録

入力チェックはココに登録した項目だけ行います。
空(未選択)送信可能なエレメントに関しては登録する必要がありません。
登録する場合は形式が決まっています。

◆登録記述方法
names:{

fname:['名前',1],
fkana:['ふりがな',1,7],
fage:['年齢',1,3],
fmail:['メール',1,1,'fmailcopy'],
furl:['URL',1,2],
fsex:['性別',4],
fadr:['住所',2,1,1],
fkiyaku:['規約',3],

dummy:[]}
上の青文字の部分がデフォルトでありますので、その間に赤文字の様に決まった記述方法で必須項目を並べていきます。

◆基本形
name:['項目名',type(,sw1)(,sw2)(,sw3)],
(行末にカンマ『 , 』を付ける)

まず、必ず必要な3つの設定。(空チェック)

name 英数半角 (必須)
チェックをするフォームエレメントのnameに指定してあるnameです。

項目名 自由 (必須)
エラー表示などで使う、その項目の表示上の項目名です。
タグのnameでは訪問者はどこの事か理解できませんからね。

type 数値 (必須)
このフォームエレメントのタグの種類によってタイプが分かれます。
1 inputとtextarea (自由書式)
2 select (単一選択・マルチプル選択)
3 checkbox (単独 ON/OFF)
4 radio (複数空の単一選択)
エレメントのタイプによってチェックの仕方が異なりますので正確に。

フォームの解説の所で使ってきた例の場合だと
fname:['名前',1],
fage:['年齢',1],

これでココに設定した項目の『未入力・空 チェック』が行えます。
この基本形だけの設定でも構いません。

◆拡張 スイッチ (前述の基本形でtype2の時、つまりSelectタグの場合)
Selectタグはmultipleを付ける事で複数選択ができるタグです。
(Alt(shift) + クリック 等)
例:
このmultipleにしたselectを必須項目にする場合は
『 最低いくつ選んで欲しいか?』『 最高いくつまで許可するか?』
と言う条件が発生してきます。

Selectをmultipleにする場合は
sw1に最低数 sw2に最高数 を設定してください。

例:
fkibou:['希望',2,1,3],
これでfkibouはSelectで『最低1個、最高3個まで選択』と言う条件になります。

sw1sw2が同じ数の場合は、 必ず選ぶ数が固定される条件になります。
例:
fkibou:['希望',2,3,3],
これで『必ず3個選択』と言う条件になります。

mulitpleなのにsw1sw2を付けなかった場合は、 sw1sw2を両方1に設定したのと同じ意味になります。(つまりmultipleが無意味)
例:
fkibou:['希望',2,1,1],
fkibou:['希望',2],
これは両方『必ず1個だけ選択』と言う条件になります。


◆拡張 スイッチ (基本形でtype1の時。INPUT、TEXTAREAタグの場合)
INPUT、TEXTAREAタグは、ビジターが自由に書き込める場所です。
従って内容(value)があるか?ないか?だけではなく、 こちらの求める内容(書式)にそっているのか?を少しだけ詳しくチェックする事が必要になる場合があります。

これをsw1に設定する数値によって、
どういうチェックをするのかを決める事が可能です。
1 メールアドレス形式チェック
2 URI形式チェック
3 半角数字のみに限定
4 半角英字・半角数字のみに限定
5 半角英字・半角数字を禁止
6 半角英字・半角数字・半角カナを禁止
7 ひらがな のみに限定
8 全角カタカナ のみに限定

例:
fmail:['メール',1,1],
これで fmail は『メールアドレス形式チェックする』と言う条件になります。

例:
furi:['HomePage',1,2],
これで furi は『簡易URI形式チェックする』と言う条件になります。

例:
fage:['年齢',1,3],
これで fage は『半角数字のみに限定』と言う条件になります。

例:
fpwd:['パスワード',1,4],
これで fpwd は『半角英字・半角数字のみに限定』と言う条件になります。

例:
fadress:['住所',1,5],
これで fadress は『半角英数を禁止』と言う条件になります。

例:
fname:['名前',1,6],
これで fname は『半角英数カナを禁止』と言う条件になります。

例:
fkana:['ふりがな',1,7],
これで fkana は『ひらがなのみ』と言う条件になります。
(スペースなども禁止されます)

例:
fkana:['フリガナ',1,8],
これで fkana は『全角カタカナのみ』と言う条件になります。
(スペースなども禁止されます)

基本的にはINPUTタグで使ってください。
TEXTAREAの場合は改行も入りますし、あらゆる条件を検査していませんので。

◆さらに、ここでsw1がこれを1の場合。
つまりメールアドレス形式チェックの場合。
sw2に比較する場所の name を入れる事で、 『 確認の為もう一度 』という比較用フォームと一致するか確認する事が可能です。

例:
メール:<input type="text" name="fmail" value="">
メール:<input type="text" name="fmail_copy" value="">(確認の為もう一度)

こういった場合は確認用のfmail_copyの方は必須項目には登録せずに
fmail:['メール',1,1,'fmail_copy'],
とする事でfmailは『メールアドレス形式チェックしてfmail_copyと比較する』と言う条件になります。
この設定だけで、これにそったエラーメッセージも出ます。

以上で、基本的な必須項目の設定は完了です。


■設定9 1項目複数チェックボックス 特殊な場合

『エラー表示 例外編』で書いたような、1つの項目に別々のnameを持つ複数のチェックボックスを置き、 その中から任意の数を選んでもらうと言う特殊な場合は、設定8の必須項目には登録できません。
1個1個のチェックを確認するわけではなく、nameの違う個々のチェックを確認して、その総数を求めなければなりません。

例:

好きなポータルサイト [3つ選択]
Yahoo Infoseek MSN Excite Goo
『エラー表示 例外編』で、こういった場合この項目を代表する name を想定しておき、 そのnameに対するID、name_outer、name_msg でエラー表示するように指示しました。 この時の 代表nameは実際にはHTMLでは使いませんが、このスクリプトの設定6で使います。

この例では代表nameをportalと言う名前にする事にします。
エラー表示はportal_outer(色変更)、portal_msg(メッセージ)となります。

◆この特殊な場合の必須項目チェック設定 の基本形式
ちょっと複雑になりわかりにくいので注意してください。
まずデフォルトのベースの形 (この特殊な形が1箇所(グループ)の場合)
box:[
{

ここに設定内容を書く

}
]
デフォルトのベースの形 (この特殊な形が3箇所(グループ)の場合)
box:[
{
ここに1箇所目の設定内容を書く
},

{
ここに2箇所目の設定内容を書く
},

{
ここに3箇所目の設定内容を書く
}
]
設定場所の大まかな枠はこうなります。
枠だけ書けば
box:[ { 設定内容 }, { 設定内容 }, { 設定内容 } ]
です。
boxが普通配列で各要素がオブジェクトとなります。


設定内容の部分は
sub:'項目名',
out:'代表name',
min:最低数,
max:最高数,
list:['各name','各name','各name','各name']
で、1箇所の設定項目になります。
(行末のカンマ、最終行のカンマ無し も重要です)
(コロンの左側は固定です)

説明
sub:'項目名',
これはこの項目の表示上の名前。エラーメッセージなどで使います。
sub:'好きなサイト',
となります。

out:'代表name',
これは前述の、この項目の仮想の代表nameです。例ではportalなので
out:'portal',
となります。

min:最低数,
max:最低数,
ここはそれぞれ、選択の数の最低数と最高数を数値で設定します。
両方の数値が同じなら、その数を必ず選ぶと言う事になります。
必ず設定してください。
min:3,
max:3,
となります。

list:['各name','各name']
これは選択肢として設定されているチェックボックスのnameすべてを登録する場所です。
list:['yahoo','infoseek','msn','excite','goo']
となります。


例で使っているこの場合なら
好きなポータルサイト [3つ選択]
Yahoo Infoseek MSN Excite Goo
代表名をportal と決めた場合なら
設定9に
box:[
{
sub:'好きなポータルサイト',
out:'portal',
min:3,
max:3,
list:['yahoo','infoseek','msn','excite','goo']
}
]
となります。
こういう場所が複数ある場合は 結果的に設定9は
box:[
{
sub:'好きな物',
out:'fhob',
min:2,
max:2,
list:['fhob1','fhob2','fhob3','fhob4','fhob5','fhob6','fhob7','fhob8']
},
{
sub:'嫌いな物',
out:'fhate',
min:2,
max:5,
list:['ninjin','piman','greenp','shiitake','pakuchi']
}
]
の様になります。
『枠』のパターンは一見難しそうに見えますが、実は単純なパターンです。 よくこの解説サンプルを見て把握してください。


改造等

■ メールの形式チェックが厳しすぎる(うまく動かない)
思いつきで作った正規表現なのでうまく動くかは不安です。
アットマークがあるか?ドットがあるか?だけ調べるなら

if(oForm[key].value.indexOf('@') >0 && oForm[key].value.indexOf('.') > 2 ){ mailchk = true; }
で、十分間に合います。
折り返してる場合は1列にしてください。

■ URLの形式チェックが厳しすぎる(うまく動かない)
思いつきで作った正規表現なのでうまく動くかは不安です。
http://またはhttps://から始まっているか?だけを調べるなら

ChgCol( (((oForm[key].value.indexOf('http://') == 0 || oForm[key].value.indexOf('https://') == 0) && oForm[key].value.indexOf('.')>7 )? true: false),key);
で、十分間に合います。
折り返してる場合は1列にしてください。

■ スリム化
誰が使うスクリプトかわからない汎用なので、設定ミスやフォームでのnameミスなども含めて 『あるか?ないか?』のチェックを入れてあってスクリプトが大きくなっています。 全体を読み取れる人は、無駄なチェックや処理を外してスリム化させてください。
ま、送信の時だけに使うチェックですから外部ファイルで読み込ませている分には邪魔にもならない思います。

■ window.onload について
このスクリプトはwindow.onload後に、フォームにonsubmit、onreset、onclickイベントを付加しています。
window.onloadも含めたイベントの付加方法はメソッド(attachEvent、addEventListener)が理解出来るブラウザに対してはメソッドを使っています。 これが理解できないブラウザには、それ以前の同じイベントを吸収して window.onload = function(){ }の様な従来の旧方法を使っています。 どちらにしても、HEAD内で一番最後にこのスクリプトを読み込ませると他のスクリプトの同一イベントを上書きもしませんし、上書きもされません。 BODYタグにonloadがある場合は、HEAD内に移動させた方が確実です。

■ グローバル変数・関数
グローバル変数としてFChkを1個だけ使用しています。 これが、他のスクリプトの変数とぶつかる場合はこのスクリプト内のFChkを変更するか、
;(function(){

配布スクリプト

})();
の様に無名関数化すればグローバルの変数も関数も使わないスクリプトになります。

■ 複数ページで使う
できれば各ページで無名関数化させたファイルを別々に読み込ませた方が結果的にエラーは少ないのでは?と思いますが、、、 一応、1つのファイルで複数ページ対応も考慮して作ってあるので一応・・・説明。

まず、グローバル変数をなくす無名関数化の方法は併用できません。

1.配布スクリプトの FChk.set(FChk); 削除。
2.各ページのHEAD内スクリプト部分
<script type="text/javascript" src="./formchecker.js"></script>
<script type="text/javascript">
FChk.id = 'myform2';
FChk.names = {
fname:['名前',1],
fkana:['ふりがな',1,7]
}
FChk.box = [];
FChk.set(FChk);

</script>
の様に配布スクリプトを読み込ませた後に、 FChkオブジェクトの各項目を代入方式で上書き設定する形を取り、 最後に FChk.set(FChk); を書いて実行命令を出しておきます。
各ページでこのパターンで設定項目の上書値をそれぞれ変えていく事で、 同じスクリプトを使いながら違う設定を使う事が可能です。

が、このスクリプトは元々設定が独特で多少難しい面があるので、 オブジェクトなどの理解ができてる方にはオススメしますが、 JavaScriptをよく理解して無い方は、各ページ別々のスクリプトをファイルを読み込ませる方法の方が良いと思います。


専用ページから申し込むと
So-netより高い3万円CB

案ずるより産むが易し
使ってみれば疑問も解決

XREA+ (plus) 206円/月
( お試し7日間 )

CORE SERVER 428円/月
( お試し15日間 )

ロリポップ 270円/月
( お試し期間10日間 )

ヘテムル 1620円/月
( お試し期間15日間 )

さくら 129円/月
( お試し期間2週間 )

無駄な高額ドメイン管理料金払ってませんか?

バリュードメイン
ムームードメイン

2010年で第二世代携帯がサービス終了。ソフトバンクに乗り換えて安くなった人が7割以上います!