半角数字のみ指定したいのですが、2つ以上のテキストボックスに適用されません。。。

質問

こんにちは。お世話様になります。

電話番号の欄など、半角数字のみ入力できるようにしたいのですが、1つのテキストボックスなら指定できるのですが、2つ以上が指定できません。
　下記のようなタグを使っております。

<script language="JavaScript" type="text/JavaScript">
<!--
function check(){
str = document.F1.color1.value;
data = str.match(/[^0-9\-]/g);
if (data) alert("半角数字以外の "+data+" が含まれています");
}
// -->
<!--
function check(){
str = document.F1.color2.value;
data = str.match(/[^0-9\-]/g);
if (data) alert("半角数字以外の "+data+" が含まれています");
}
// -->

<form name="F1">
<input type="text" onKeyDown="check()" size="5" name="color1">
<input type="text" onKeyDown="check()" size="5" name="color2">
</form>

この場合、「color2」の方は有効なのですが、「color1」の方には、適用されず、「color2」の設定をを消すと「color1」が有効になります。

　どちらも有効にする方法をご教示頂けないでしょうか。

windows XP IE6.0を使っております。
お忙しい中恐れ入りますが、宜しくお願い致します。

回答No.3

yambejp · ベストアンサー

alert出すこともないんじゃないかな？

<script>
function check(obj){
var v=obj.value;
if(v.match(/[^0-9]/g)){
obj.value=v.replace(/[^0-9]/g,'');
}
}
</script>
<form>
<input type="text" onKeyup="check(this)" size="5" name="color1">
<input type="text" onKeyup="check(this)" size="5" name="color2">
</form>

お礼

yambejpさん、できました！！
本当に助かりました！！
直にお会いしてお礼を言いたいくらいです！！

　勉強になりました。ご教示くださり、本当にありがとうございます！！！

回答No.2

pick52

同じ名前の関数を使用したらどちらが実行されるかは不定です。
通常は後に書いたものが実行されると思います。
以下のように修正してください。

function check(){
var form = document.getElementsByName('F1')[0];
for(var i = 0; i < length; i++) {
var str = form[i].value;
var data = str.match(/[^0-9\-]/g);
if(data) {
alert('半角数字以外の ' + data + ' が含まれています');
return false;
}
}
}

また、JavaScriptは無効にできるので、JSだけのチェックで済まさずに
ちゃんとサーバ側でもチェックしてください。

お礼

pick52さん、
問題解決いたしました。
アドバイスくださり、本当にありがとうございました！

補足

pick52さん、アドバイスありがとうございます。

　こちらをコピペさせていただいたのですが、color1、color2ともにアラートのダイアログボックスがなぜか出なくなってしまいました。。。

　サーバーにupしてチェックをしたのですが、うまくいきません。。。
なぞです。。。

回答No.1

nda23

メソッドが重複しているからです。
パラメータ形式にしたら如何でしょう。

function check(box) { ★一箇所だけにする
str = box.value;
data = str.match(/[^0-9\-]/g);
if (data) alert("半角数字以外の "+data+" が含まれています");
}

<input type="text" onKeyDown="check(this)" size="5" name="color1">
<input type="text" onKeyDown="check(this)" size="5" name="color2">

お礼

nda23さん、
問題解決いたしました。
アドバイスくださり、本当にありがとうございました！

補足

早速のアドバイスありがとうございます。
nda23さんのアドバイスどおりやってみたのですが、
今度は、color1、color2のどちらも、半角数字以外を入力してもアラートのダイアログボックスがでなくなってしまいました。。。

　大変お忙しい中申し訳ございません。原因は何が考えられるでしょうか。ご返信お待ちしております。