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

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

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

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

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

---

汎用スクリプト

---

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

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

---

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

---

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

■基本的フォーム

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

こうなります。

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

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

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

---

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

valueを省略する事も可能なエレメントもありますが、 省略はせずに必ずvalue属性も使用してください。(空でも)
例
selectのoptionに関しては『選択してください』の様な案内用表示に関しては、 必ずvalueを空にして下さい。

---

■エラー 背景色変更

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

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

例：項目名に付けてみます。
nameと対応させているのがわかりますね。
色が無い時の見た目は同じです。
エラーが出るとこうなります。

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

---

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

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

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

下側にDIVで高さ20pxを取ったエラースペースが増えました。
エラーの場合はそこにメッセージが表示されます。
(この例は背景色変更を併用)

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

---

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

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

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

エラー表示は色付きの文字の方が良いのでclass指定とCSSで色も付けてます。
エラー1箇所表示のDIVは外しました。
エラーの場合は各項目用の場所にそれぞれメッセージが表示されます。
(この例は背景色変更を併用)

---

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

---

■エラー表示 例外編

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

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

こういった場合は、それぞれに違う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 入力チェックをする必須項目の登録

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

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

◆基本形

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

◆拡張 スイッチ (前述の基本形でtypeが2の時、つまりSelectタグの場合)

◆拡張 スイッチ (基本形でtypeが1の時。INPUT、TEXTAREAタグの場合)

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

---

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

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

例：

『エラー表示 例外編』で、こういった場合この項目を代表する name を想定しておき、 そのnameに対するID、name_outer、name_msg でエラー表示するように指示しました。 この時の 代表nameは実際にはHTMLでは使いませんが、このスクリプトの設定6で使います。

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

◆この特殊な場合の必須項目チェック設定 の基本形式
ちょっと複雑になりわかりにくいので注意してください。
まずデフォルトのベースの形 (この特殊な形が１箇所(グループ)の場合)
デフォルトのベースの形 (この特殊な形が３箇所(グループ)の場合)
設定場所の大まかな枠はこうなります。
枠だけ書けば
box:[ { 設定内容 }, { 設定内容 }, { 設定内容 } ]
です。
boxが普通配列で各要素がオブジェクトとなります。


設定内容の部分は
例で使っているこの場合なら
代表名をportal と決めた場合なら
設定9に
となります。
こういう場所が複数ある場合は 結果的に設定9は
の様になります。
『枠』のパターンは一見難しそうに見えますが、実は単純なパターンです。 よくこの解説サンプルを見て把握してください。

---

改造等

---

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

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を変更するか、 の様に無名関数化すればグローバルの変数も関数も使わないスクリプトになります。

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

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

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

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

---