入力フォームの 空チェック用スクリプト 簡易版

入力フォームの空欄をチェックするだけの簡単スクリプトです。
必須項目と自分が決めて設定した場所だけ空チェックします。

フォームはJavaScriptがOFFの場合でも送信可能にして、データを受け取るCGI側で行うのが基本だと思います。 JavaScriptがONの時だけ補助的な事前チェック機能として付けておくのが良いと思います。 サンプルはJavaScriptがOFFの場合でも送れるようにできますが、 デフォルトではJavaScriptがONで無いと送れないようになっています。(簡単に変更可能)
ここでのフォームチェックは空欄チェックのみにします。

これらは使い方に応じて考えてください。

---

完成サンプル 1

---

[ INPUT、TEXTAREA、Selectの空フォームだけのチェック ]

シンプルフォームの空欄チェック用。
Selectはvalue値を設定し単一選択型の場合のみ。

■サンプル 1-1 sample1-1.htm
背景色を変えてエラーを教える物。

■サンプル 1-2 sample1-2.htm
背景色変更 + 各項目毎にエラーメッセージを出す物。
(色を使わない事も、メッセージを使わない事も可能)

■サンプル 1-3 sample1-3.htm
背景色変更 + 1箇所のエラーメッセージエリアにエラー表示。
(色を使わない事も、メッセージを使わない事も可能)

サンプルHTMLをそのまま使っても、ソース部分をコピーしてもOKです。
説明はサンプルの方の画面にあります。フォームは自分で項目数やレイアウトを組んでください。 INPUTやTEXTAREAの背景色を変えるものなので、空チェックはvalueの値のみで行っています。

各設定項目は
項目名:'設定内容'
と言う、コロン『:』で結ぶ形になっています。
行末にセミコロン『;』をつけたりしないでください。
(オブジェクトのキーと要素の書き方です)

設定5の
names:{
'fname':'名前', 'fage':'年齢', 'fmail':'メール', 'fadr':'住所', '':'',
'':''} /*この最終行 は このまま使わない */

この書き方が、少しわかりにくいかも？
names:{
'fname':'名前',
'fage':'年齢',
'fmail':'メール',
'fadr':'住所',
'':'',
'':''} /*この最終行 は このまま使わない */
の様に、 names:{ } の中に 'タグのname':'項目名' と言うペアにした物をカンマで区切って並べる方法です。
このペアはエラーメッセージに使う物です。

---

フォームやアンケートに使えるほぼ全項目のチェックは設定方法がちょっとわかり辛いので Formチェック2に掲載しています。

---

解説・作り方など

---

自分で作りたい人もいると思いますので、完成品ではなく シンプルな方法から順に機能を付加していく形で説明しておきます。
基本Sample1についてです。(2,3は1に更にちょっと付加した程度ですので)

---

■工程１ test1.htm

まずフォームを自分なりのレイアウトで作ります。
formタグにonSubmit="return 関数(this)"を付けて、 Submitボタンが押されたらスクリプトに処理を渡してその戻り値を要求します。
onsubmitは送信前に評価が入りますので、スクリプト側でfalseを返せばフォームは送信されません。 trueを返せば送信されます。

スクリプト側ではthisでフォームオブジェクトを貰っているので、 getElementByIdなどを使わなくて済みます。 フォームは送信するのにnameが必要なので、そのままnameで全て行っていしまいます。
あとはスクリプト側で各項目を指定してvalue値をチェックするだけです。
空項目をチェックする対象だけ調べて、空があれば何らかのアクションを起こしてfalseを戻します。

---

■工程２ test2.htm

アラートをローレベルブラウザの為だけにしておいて、 getElementByIdかallコレクションが使えるブラウザは項目の背景色を変えるようにします。

---

■工程３ test3.htm

今までErrと言う関数で『空』の場合だけ警告操作をしていましたが、 この関数を『空』『空でない場合』を両方チェックする関数に変えます。 空なら色をつけて、空でなければ色を戻します。

また、リセットボタンでも色も戻るようにしなければ不自然なので、 フォームにonReset()をつけて、リセット時に色を戻す関数に渡します。 全項目をいちいち調べる必要はなく、チェック時に配列に入れておいたオブジェクト全てに対して 色を元の色に戻します。

---

■工程４ test4.htm

JavaScriptがOFFだとこのチェックは何の役にも立たなくなります。
ま、補助的なものなら構わないのですが、ここから先はJavaScriptがONでないと送れないようにします。

submitボタンをただのボタンに変えてJavaScriptでsubmit()する方法と、 Submitボタンは残すがactionを外してしまって、 スクリプト側で送信可能な状態ならactionを設定してsubmit()する方法があります。 Submitボタン後者の方がフォームの特性を生かせるので後者にします。 でもフォームはEnterキーでいきなり送信されてしまう事も避ける為、 Submitボタン自体は半分生かしながら、onsubtmi="return false"で送信は無効にします。
ま、ちょっと無駄があるのですが結果的にと言う事で。

3で先に付けておいてもよかったのですが、使いやすくする為に
if(rval){ obj.focus(); }
と言うのをチェック処理の中につけておいて、最初に見つかった空欄にフォーカスを移します。

---

■工程５ test5.htm

更に使いやすくして完成です。
ページがロードされるとフォーカスが最初のエレメントに当たるようになっています。 スクリプトを後からも設定をしやすいように、整理してあります。
これでスクリプトの内容を忘れても、設定が簡単にできます。 また、設定部分だけをページに残して、function郡をソースファイル化する事で、 個々のページで設定を変えながらソースを共有できます。

このスクリプトではチェック自体はIDからのオブジェクト指定は使っていませんが、 自分で使いやすいように改造できるようにIDからもとりやすくしています。
chk_dom()と言う関数は、 引数なしで呼ぶと、getElementByIdかallが通ればtrueを、通らなければfalseを返すようになっています。 引数にIDを入れて呼ぶと、getElementByIdかallでそのオブジェクトを返します。 IDに対応するオブジェクトが無い場合はundefinedを返します。

これで完成です。完成サンプル１とほぼ同じになります。
サンプルは下位互換(結構古いブラウザ)を切り捨ててますが、 グローバル変数・関数を一つにして、オブジェクトにしています。

---

完成サンプルの２，３は更に文字でエラーアナウンスをつけてあります。

---