■実用サンプル 1-3

エラーメッセージを個別に出すのではなく、１つの専用のエリアにだします。 1箇所に出すので、色と併用して 最初に見つかったエラーだけをアナウンスしています。 最初からメッセージを出すエリアの高さ指定をしておく事でレイアウトが動かないようにできます。 (メッセージの長さにもよるので調整)
全体のレイアウトを考えて、どこでも良いのでメッセージスペースを作ってID指定します。 サンプルでは errmsg というIDがエリアになっています。
変更する場合はスクリプト内の該当する場所を変更。

・使い方はまず自分のデザインでフォームを作る。(action属性は付けない)
・フォームタグと送信ボタンに必ずIDを付ける(他のエレメントはname属性だけで良い。 送信ボタンのタイプは submitでもbutton でもどちらでも大丈夫です。
・スクリプトの設定１〜８に必要な設定をする
・エラー表示場所を一箇所作り errmsg というIDを付ける。
以上です。
(エラーメッセージ場所が無い場合はエラーを出さずに無視します)

カスタマイズ
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個を使っています。 この名前が他のスクリプトとぶつからなければ正常に動きます。
無名関数化する場合はスクリプトの前後の行に記述を追加して

の様に、無名関数化して実行の () をつければグローバル変数無しで使えます。