JavaScriptでの入力チェックについて


下記のように、テキストボックスとテキストエリアを設置し、
submitボタンクリック時にでJavaScriptによる入力チェックを行う場合、
テキストエリアの方が未入力チェックに引っ掛かりません。

どのように修正すべきでしょうか。ご教示願います。

<form name="sample" action="" methid="post">
<input type="text" name="test1">
<textarea name="test2" cols="80" rows="4"></textarea>

</form>

********************

function InputCheck(){

var flg=0;

if(document.sample.test1.value==""){
msg='テキストボックスが入力されていません。';
flg=1;
}else if(document.sample.test2.value==""){
msg='テキストエリアが入力されていません。';
flg=1;
}

if(flg){
window.alert(msg);
return false;
}else{
return true;
}
}

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/01/23 08:59:15
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:pretaroe No.3

回答回数531ベストアンサー獲得回数75

ポイント34pt

テキストエリアのばあい、nullを返すことがあるからかも

}else if(document.sample.test2.value=="" || document.sample.test2.value==null){

ように書いてみるとどうでしょうか?


デバッグ用のロジックを追加して、
document.sample.test2.valueの値を調べたほうが良いと思います。

たぶんこう動くはずというのでなくて、期待しない値が入ってるかも。
テキストエリアの場合、未入力でも空白文字(スペース)が入ってることも考えられます。
文字列にTrim処理をかける必要があるかも。

その他の回答2件)

id:cno No.1

回答回数124ベストアンサー獲得回数12

ポイント33pt

上記のチェック処理部分の記述では「test1が空白でない場合(else if)にテキストエリアのチェックを行う」となります。テキストとテキストエリア両方のチェックを行い、かつダイアログにそれぞれのメッセージを表示させたい場合は

function InputCheck(){

var flg=0;
var msg="";

if(document.sample.test1.value==""){
msg+='テキストボックスが入力されていません。';
flg=1;
}

if(document.sample.test2.value==""){
msg+='テキストエリアが入力されていません。';
flg=1;
}

if(flg){
window.alert(msg);
return false;
}else{
return true;
}
}

のようにすればよろしいかと思います。

id:hiroto300 No.2

回答回数357ベストアンサー獲得回数100

ポイント33pt
function InputCheck(){
var flg=0;
if(document.sample.test1.value==""){
/*
テキストボックスが未入力のとき、テキストエリアが入力されていても未入力でも、この部分は実行される。
テキストボックスが入力されているとき、テキストエリアが入力されていても未入力でも、この部分は実行されない。
 */
msg='テキストボックスが入力されていません。';
flg=1;
}else if(document.sample.test2.value==""){
/*
テキストエリアが未入力のとき、テキストボックスが入力されていると、この部分は実行される。ただし、テキストボックスが未入力だと、この部分は実行されない。
テキストエリアが入力されているとき、テキストボックスが入力されていても未入力でも、この部分は実行されない。
 */
msg='テキストエリアが入力されていません。';
flg=1;
}
if(flg){
window.alert(msg);
return false;
}else{
return true;
}
}

If文のテキストエリア(test2)のチェックをelse ifで行なっているのがいけません。
テキストボックス(test1)が未入力の場合、テキストエリア(test2)の処理がスルーされてしまいます。
次のようにすると良いです。

function InputCheck(){
var flg1=0;
var flg2=0;
if(document.sample.test1.value==""){
msg1='テキストボックスが入力されていません。';
flg1=1;
}
if(document.sample.test2.value==""){
msg2='テキストエリアが入力されていません。';
flg2=1;
}
if(flg1||flg2){
if(flg1){
window.alert(msg1);
}
if(flg2){
window.alert(msg2);
}
return false;
}
else{
return true;
}
}

どちらも未入力の場合、2回メッセージを表示します。

id:hiroto300

1つ目のプログラムソースに、コメントを加えさせていただきました。

2013/01/22 21:13:58
id:pretaroe No.3

回答回数531ベストアンサー獲得回数75ここでベストアンサー

ポイント34pt

テキストエリアのばあい、nullを返すことがあるからかも

}else if(document.sample.test2.value=="" || document.sample.test2.value==null){

ように書いてみるとどうでしょうか?


デバッグ用のロジックを追加して、
document.sample.test2.valueの値を調べたほうが良いと思います。

たぶんこう動くはずというのでなくて、期待しない値が入ってるかも。
テキストエリアの場合、未入力でも空白文字(スペース)が入ってることも考えられます。
文字列にTrim処理をかける必要があるかも。

id:kon39392

ご回答ありがとうございます。

確かにelse ifを使用する意味はありませんでしたね。

結論的にはTrim処理をかけることで解決しました。

どうもありがとうございました。

大変助かりました。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません