HTTPサーバーとWeb開発

89. ALERT内での改行方法

Javascriptのアラートダイアログ：alert はデバッグだけでなく、
入力エラーやサーバーエラー等のエラーメッセージの通知にも利用できる。

例えば次のように入力内容の妥当性検査（半角英数チェック）にalertを利用することで、
ユーザーに入力エラーを通知することができる。

【 入力エラー通知のサンプル 】

フォームへ [ 全角文字 ] を入力してフォーカスを外すとアラートダイアログが表示されます。

■ ソースコード

function chkFrm1(val){
    if(val.match(/[^0-9a-zA-Z]/g)){
        alert('半角英数で入力してください。');
    }
}

では、通知するエラーエッセージが長文であったり、複数の項目に分かれている等
アラートダイアログ内でメッセージの改行を行いたい場合はどうすればよいのか？

ダイアログ内の改行方法は簡単で、 

alert('入力エラーです。\n半角英数で入力してください。')

のようにして任意の位置で改行を示す特殊文字\nを記述するだけで改行ができる。

【 アラートダイアログの改行 その１ 】

フォームへ [ 全角文字 ] を入力してフォーカスを外すとアラートダイアログが表示されます。

■ ソースコード

function chkFrm2(val){
    if(val.match(/[^0-9a-zA-Z]/g)){
        alert('入力エラーです。\n半角英数で入力してください。');
    }
}

ブラウザの入力チェックのように決まったメッセージを表示するだけであれば、
エラー内容に応じたメッセージの記述が簡単なため、上記のようにエラー内容を
直接Javascriptへ記述するのが一般的である。

しかしながらサーバー側のエラーを通知する場合は一旦フォームの内容を送信し、
サーバー側でエラーチェックを行ったあとで、 

<div id="ERRMSG_01">
入力エラーです。
半角英数で入力してください。
</div>

のようにエラーメッセージをソース内の特定の箇所 （この場合では<div>...</div>内） へ
埋め込んだHTMLを戻し、これをJavascriptで取り出してアラートダイアログへ表示するのが
一般的である。
この場合は当然、手作業で改行 ( \n ) を記述することができないのだが、
実際に下記のサンプルを実行してみると困ったことが起きてしまう。

【 アラートダイアログの改行 その２ 】

フォームへ [ 全角文字 ] を入力してフォーカスを外すとアラートダイアログが表示されます。

■ ソースコード

function chkFrm3(val){
    if(val.match(/[^0-9a-zA-Z]/g)){
        alert(document.getElementById('ERRMSG_01').innerHTML);
    }
}

<body>
    :
<div id="ERRMSG_01" style="display:none;">
入力エラーです。
半角英数で入力してください。
</div>
    :
</body>

メッセージの内容が改行されずに表示されていることにお気付きだろうか。
<div>...</div>内のメッセージをJavascriptで取得してそのまま表示すると、
HTMLソース内の改行が半角スペースへ変換されてダイアログに表示されてしまうのである。

これを回避するためには、サーバー側からメッセージを埋め込む際に改行コードも付加してやる
必要があるが、サーバー側のエラーメッセージはブラウザ側のエラーに比べ莫大な数が存在するため、
非常に手間がかかってしまう。

Javascriptを利用していると、このように実際のHTMLソースとJavascriptで取得したHTMLの内容の
違いに悩まされることが多く、回避のために少し工夫が必要となる。

この場合の回避方法は、HTMLソース内へ埋め込まれるメッセージを 

<textarea id="ERRMSG_02">
入力エラーです。
半角英数で入力してください。
</textarea>

のように<div>...</div> から <textarea>...</textarea> へ埋め込むように変更すればよい。
<textarea>へ埋め込んだ場合は改行コードが半角スペースに変換されることなく、
HTMLソース内の改行をそのままの形で表示することができる。

【 アラートダイアログの改行 その３ 】

フォームへ [ 全角文字 ] を入力してフォーカスを外すとアラートダイアログが表示されます。

■ ソースコード

function chkFrm3(val){
    if(val.match(/[^0-9a-zA-Z]/g)){
        alert(document.getElementById('ERRMSG_02').innerHTML);
    }
}

<body>
    :
<textarea id="ERRMSG_02" style="display:none;">
入力エラーです。
半角英数で入力してください。</textarea>
    :
</body>

CGIでサーバー側のエラーメッセージを通知する際は、上記のようにHTMLソース内へ
エラーメッセージを埋め込んでクライアントへ通知する手法が一般的である。
しかしながら、サーバーエラーのように長文のエラーメッセージを改行のないまま
表示するのは可読性に欠けるため、このような細やかな配慮が必要と言える。