人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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;
}
}


●質問者: kon39392
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● cno
●33ポイント

上記のチェック処理部分の記述では「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;
}
}

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


2 ● Hiroto
●33ポイント
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回メッセージを表示します。


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

3 ● pretaroe
●34ポイント ベストアンサー

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

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

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


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

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


質問者から

ご回答ありがとうございます。
確かにelse ifを使用する意味はありませんでしたね。

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

どうもありがとうございました。
大変助かりました。


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ