- PR -

エラーメッセージを初期化した時に、テキストフィールドを認識しないようにするには？

1
投稿者投稿内容
ごろう
ベテラン
会議室デビュー日: 2006/12/06
投稿数: 50
お住まい・勤務地: 神奈川県横浜市　横浜駅の海方面
投稿日時: 2007-11-30 23:25
送信ボタン押下時に、
ラジオボタンをチェックしてあるか判定して、
チェックしていれば、送信ボタンの下にエラーメッセージを表示するようにしています。

radio1とradio2両方選択せずに、送信ボタンを押下して、
errorMessage1とerrorMessage2を表示させた後、
radio1を選択して、送信ボタンを押下すると、
errorMessage1は表示されませんが、
errorMessage1のdivタグ分だけ空白が空いて、その空白の下にerrorMessage2が表示されます。
errorMessage1のdivタグ分の空白を作らずに、
送信ボタンのすぐ下にerrorMessage2を表示するにはどうしたらよいのでしょうか？

ソースは下記のように書いています。

<script type="text/javascript">
function checkRadio(){
//エラーメッセージのテキストフィールドを初期化
var errorMessage1 = window.document.getElementById("radio1");
errorMessage1 .innerText = "";
var errorMessage2 = window.document.getElementById("radio2");
errorMessage2 .innerText = "";

var obj = document.getElementsByName("radio");
for(var i=0;i<obj.length;i++){
var objRadio = obj[i];
if(objRadio.checked==true){
return true
}else{
errorMessage1.innerText = "radio1を選択してください"
errorMessage2.innerText = "radio2を選択してください"
return false;
}
</script>

<form>
<table>
<tr>
<input type=radio id="radio1" name="radio">radio1<br>
</tr>
<tr>
<input type=radio id="radio2" name="radio">radio2<br>
</tr>
<tr>
<input type=submit value="送信" onclick="return checkRadio();">
<div id="errorMessage1"></div>
<div id="errorMessage2"></div>
</tr>
</form>
小僧
ぬし
会議室デビュー日: 2002/08/14
投稿数: 526
投稿日時: 2007-12-02 19:54
JavaScriptネタは　リッチクライアント & 帳票 の方がよいと思いますよ。
tkrn
ベテラン
会議室デビュー日: 2005/10/25
投稿数: 61
投稿日時: 2007-12-02 23:29
内容とコードが微妙に合っていないように思えますが内容通り出来ていると思って回答します。

引用:

errorMessage1のdivタグ分の空白を作らずに、
送信ボタンのすぐ下にerrorMessage2を表示するにはどうしたらよいのでしょうか？


errorMessage1のdivタグをタグごと非表示化させることでできると思います。

errorMessage1のdivタグを非表示にする
errorMessage1.style.display = "none";

戻す(表示させる)ときは、
errorMessage1.style.display = "";
でいいと思います。

最初からメッセージを非表示で持たせておいてタグの表示非表示でコントロールすると楽かもしれません。

<div id="errorMessage1" style="display:none;">radio1を選択してください</div>
<div id="errorMessage2" style="display:none;">radio2を選択してください</div>

ごろう
ベテラン
会議室デビュー日: 2006/12/06
投稿数: 50
お住まい・勤務地: 神奈川県横浜市　横浜駅の海方面
投稿日時: 2007-12-03 09:30
思い通りに空白行を消す事ができました。

月曜日の朝ですが、悩みをひとつ減らす事ができました。

ありがとうございました！


ちなみに、
errorMessage1.style.display = "none";
として、divを非表示にする際に、
var errorMessage1 = window.document.getElementById("radio1");
とIdをgetしなくてもうまくいったのですが、これで良いのでしょうか？

[ メッセージ編集済み 編集者: ごろう 編集日時 2007-12-03 09:48 ]
冬寂
ぬし
会議室デビュー日: 2002/09/17
投稿数: 449
投稿日時: 2007-12-03 09:56
>ごろうさん、tkrnさん
ちょっとまて！
JavaとJavascriptの違いは判るよね？

# javacしてもエラーが出る、って見てみたらjavascriptで書いてあった。ってー脱力したくねーだろ？
tkrn
ベテラン
会議室デビュー日: 2005/10/25
投稿数: 61
投稿日時: 2007-12-03 10:08
引用:

ちなみに、
errorMessage1.style.display = "none";
として、divを非表示にする際に、
var errorMessage1 = window.document.getElementById("radio1");
とIdをgetしなくてもうまくいったのですが、これで良いのでしょうか？


しなくていいです。
むしろコード上混乱してしまうのでしてダメです。

errorMessage1は
<div id="errorMessage1"></div>
のdivタグを示していますが、

var errorMessage1 = window.document.getElementById("radio1");
のerrorMessage1は、
<input type=radio id="radio1" name="radio">
のinputタグを示しています。

今回コントロールしたいタグは前者のdivタグになりますので、
var errorMessage1 = window.document.getElementById("radio1");
は不要(間違い)という事になります。
tkrn
ベテラン
会議室デビュー日: 2005/10/25
投稿数: 61
投稿日時: 2007-12-03 10:18
引用:

冬寂さんの書き込み (2007-12-03 09:56) より:
>ごろうさん、tkrnさん
ちょっとまて！
JavaとJavascriptの違いは判るよね？

# javacしてもエラーが出る、って見てみたらjavascriptで書いてあった。ってー脱力したくねーだろ？


たしかに。
小僧さんの指摘後直ぐの回答だった為「リッチクライアント & 帳票」に移動されていなかったのでそのまま書いてしまいました。
JavaScriptの質問は「リッチクライアント & 帳票」でしましょう（遅)
ごろう
ベテラン
会議室デビュー日: 2006/12/06
投稿数: 50
お住まい・勤務地: 神奈川県横浜市　横浜駅の海方面
投稿日時: 2007-12-05 11:37
引用:

tkrnさんの書き込み (2007-12-03 10:18) より:

小僧さんの指摘後直ぐの回答だった為「リッチクライアント & 帳票」に移動されていなかったのでそのまま書いてしまいました。
JavaScriptの質問は「リッチクライアント & 帳票」でしましょう（遅)



了解しました。
以後、気をつけます。
1

スキルアップ／キャリアアップ（JOB@IT）