(サンプルフォームはレイアウトの為にテーブルを使ってます)
サンプル 1-1 に 各項目全てにメッセージを出すようにしたものです。
サンプルはテーブルを組んでいるので右側にSPANでメッセージを出す場所を作っています。
これらは自由に作ってください。
各項目に対応するエラーメッセージエリアのSPAN(他にもinnerHTMLが可能ならOK)のidは、
項目名に _msg を加えた物にしています。(テーブルを使うならTDにつけても良い)
例えばfname のエラーメッセージは fname_msg というIDのinnerHTMLとして表示されます。
メッセージカラーはエラー表示エリアにクラスをつけてCSSで指定しているだけです。
・使い方はまず自分のデザインでフォームを作る。(action属性は付けない)
・フォームタグと送信ボタンに必ずIDを付ける(他のエレメントはname属性だけで良い。
送信ボタンのタイプは submitでもbutton でもどちらでも大丈夫です。
・スクリプトの設定１〜８に必要な設定をする
・エラーメッセージを表示する場所を各項目ごとに設定して "項目名 + _msg"と言う名前を付ける。
(エラーメッセージ場所が無い場合はエラーを出さずに無視します)
以上です。
カスタマイズ
action='送信先'をフォームタグに付けるとJavaScriptがOFFでも送信できるようになります。
この場合JavaScriptがOFFの人は空欄チェックが行われずに送信されます。
色とメッセージ両方でエラーを知らせるとだとうざい場合は、 設定3のエラー表示の色をデフォルト(ページ上の初期色)と同じにするか '' にすればOKです。
■ 対応ブラウザ
document.getElementById() が無効なブラウザ、JavaScriptが無効なブラウザでは送信不可です。
attachEvent() または addEventListener()が使えないブラウザの場合は、
このスクリプトより後に window.onloadがあったり、BODYタグにonloadイベントハンドラが付いていると、
このスクリプトがセッティングできない可能性が大きいです。
従ってこのスクリプトをHEAD内の最後に書いて、BODYタグのonloadはJavaScript内でのwindow.onload に書き換える必要があります。
このスクリプトより前に window.onload があってもそれを上書きする事はありません。
他のスクリプトが存在しない場合や attachEvent() または addEventListener()が使えるブラウザに関しては、
イベントが上書きされることはありません。
■ グローバル変数・関数
FChk と言うグローバル変数名(オブジェクト名)1個を使っています。
この名前が他のスクリプトとぶつからなければ正常に動きます。
無名関数化する場合はスクリプトの前後の行に記述を追加して