掲示板/JavaScript質問板/過去ログ/一覧/ 入力チェックについて

0 名前：タカ： 2005/11/27 10:38: はじめまして。
今、フォームを作成しているのですが、javascriptでも入力チェックをつけたい
と思っております。
そこで、jsファイルを作成しリンクにしたのですが、どうも上手く動きません。
どうか、お知恵を拝借させてください。

### seikyu_check.jsにて保存 ###


### seikyu.html ###
ヘッダーには
　<script language="JavaScript" type="text/JavaScript" src="seikyu_check.js"></script>

フォームタグには
　<form action="#" method="post" name="seikyu" onSubmit="return blankCheck()">

と記述してあります。
よろしくお願いいたします。

1 名前： m035 ： 2005/11/27 10:38 ［URL］: 外部ファイルには要りません。
ヘッダーには
<script language="JavaScript" type="text/javascript" src="seikyu_check.js"></script>
と書いてください。
それと、アラートが何度も出ると迷惑なので、スクリプトも以下のように
アラートを一つにまとめたほうがいいかと。
function blankCheck(){
var str="";
//名前の入力チェック
if(document.seikyu.name.value == "")str+="お名前";

//電話番号のチェック
if(document.seikyu.tel.value == "")str+="・電話番号";

//郵送先住所の入力チェック
if(document.seikyu.add.value == "")str+="・住所";

if(str.length>0){
window.alert(str+"を入力してください。");
return false;
}
return ture;
}

2 名前：タカ： 2005/11/27 10:38: 回答ありがとうございます。
が、やはり正常に作動しません・・・
素通りしてメールが送られてしまいます・・・
原因がわからないので、ソースをもう一度調べてみます。
ありがとうございました。

3 名前： zack ： 2005/11/27 10:38: とりあえず、WinXP IE6では動きますね
「1.htm」
<script type="text/javascript" src="./2.js"></script>
<body>
<form action="test.htm" method="post" name="seikyu" onSubmit="return blankCheck()">
<input type="text" name="name1">
<input type="text" name="tel1">
<input type="text" name="add1">
<input type="submit">
</form>
「2.js」
function blankCheck(){
//名前の入力チェック
if(document.seikyu.name1.value == ""){
alert("お名前を入力してください。");
return false;
}
//電話番号のチェック
if(document.seikyu.tel1.value == ""){
alert("電話番号を入力してください。");
return false;
}
//郵送先住所の入力チェック
if(document.seikyu.add1.value == ""){
alert("住所を入力してください。");
return false;
}
return ture;
}

4 名前：タカ： 2005/11/27 10:38: こんにちは。
m035さん、zackさん、ありがとうございます。
たしかにお二方のをはじめから入力すると動きました。
なぜ、私のコードだと認識しないか教えていただけますか？

フォームがあるHTML：http://www.mywave.co.jp/~tobi_t/sample/seikyu.html

jsファイル：http://www.mywave.co.jp/~tobi_t/sample/seikyu_check.js

です。
よろしければお願いいたします・・・
imgなどは除いてあります。

5 名前： zack ： 2005/11/27 10:38: こんにちは
menu.jsがないのと、関数「MM_preloadImages」がありません

6 名前：タカ： 2005/11/27 10:38: 何度もすみません・・・
へたなサイトで公開が恥ずかしかったので別フォルダに移していました・・・
ＵＲＬ：http://www.mywave.co.jp/~tobi_t/
が、インデックスで、その中の資料請求がjavascriptが動かないページです。

＞menu.jsがないのと、関数「MM_preloadImages」がありません

上記ＵＲＬではどうでしょうか？
フォームを見直してみたのですがこんがらがってきました・・・

7 名前： m035 ： 2005/11/27 10:38 ［URL］: alert("郵送先住所を入力して下さい。");
これはいけません。
window.alert("郵送先住所を入力して下さい。");
のようにしましょう。（問題解決とは別件ですが）
<input name="name" type="text" size="21" maxlength="20">
↑
コレが原因かも知れません。
document.seikyu.name.valueのプロパティが参照出来ないとエラーが出てます。
（FireFoxとIE6で確認）
おそらくname要素とnameとしてのnameが混同してるからでしょう。
<input name="name1" type="text" size="21" maxlength="20">
のようにname要素と取り違えられない名前をつけましょう。
（これはzackさんが>3でやってますね）
これがだめならまた考えますので報告してください。
ではでは・・・

8 名前：タカ： 2005/11/27 10:38 ［URL］: こんばんは。
返事、大変遅くなりまして申し訳ありません。
m035さん、
<input name="name" type="text" size="21" maxlength="20">を
<input name="name1" type="text" size="21" maxlength="20">
に変更してみたところ、エラーは出なくなったのですがまだ素通りします。
zackさんの>3は、”おそらくname要素とnameとしてのnameが混同”ということだったのですね・・・
気づかずに失礼しました<(_ _)>
何度もクレクレ申し訳ないです・・・

9 名前： m035 ： 2005/11/27 10:38 ［URL］: blankCheck()内のdocument.seikyuの部分をすべて
document.forms[0]にすると、提示されたサンプルページで
入力を正しくチェックできました。変更してみてください。
今回の問題はどうやらformの要素に正しくアクセスできないのが問題だった様です。
ちなみにdocument.forms[0]と言うのは一つ目のformを表しますので、
bodyの中に複数のformがある場合（ほとんど無いとは思いますが･･･）は
forms[0]の0の部分を1番目のformなら0に、2番目なら1に、三番目なら2・・・
と言うようにformを0から順番に数えた数字に置き換えてください。
例によってだめならもう一度報告してください。

10 名前：はる： 2005/11/27 10:38: onsubmit="return blankCheck()" でしょ（>>0は正しいのに、本番で間違っている）
blankCheck(this) でform要素を渡してやればコードがもっと簡単になるかと。

> return ture;
誰かツッコんで（笑）

>>7
> window.alert("郵送先住所を入力して下さい。");
> のようにしましょう。
何故？その論理でいけば、onsubmit="return window.blankCheck()" と書かねばならないけど。

> name要素とnameとしてのnameが混同してる
かなり意味不明なのですが、name要素って何でしょう？
elements['name']で普通に参照できると思いますが。

11 名前： m035 ： 2005/11/27 10:38 ［URL］: >onsubmit="return blankCheck()" でしょ
これは忘れてました。ナイスです。

>> window.alert("郵送先住所を入力して下さい。");
>> のようにしましょう。
>何故？その論理でいけば、onsubmit="return window.blankCheck()" と書かねばならないけど。
これはalert()だけで動作するのがIE独自拡張によるものだと聞いたことがあるためです。
IE以外のブラウザのためにwindow.alert()にする程度の手間なら惜しむべきではないと思ったので。

>> name要素とnameとしてのnameが混同してる
>かなり意味不明なのですが、name要素って何でしょう？
>elements['name']で普通に参照できると思いますが。
document.seikyu.nameでformに設定したname（この場合はseikyu）が取得される可能性があるのでは？
･･･と思ったためです。間違ってましたか。

12 名前：はる： 2005/11/27 10:38: > これはalert()だけで動作するのがIE独自拡張によるもの

誰がそんなデタラメを。

http://web.archive.org/web/20040725050530/http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/window.html
| Because the existence of the current window is assumed, you do not have to refer
| to the name of the window when you call its methods and assign its properties.
| For example, status="Jump to a new location" is a valid property assignment,
| and close() is a valid method call.

http://www2u.biglobe.ne.jp/%7Eoz-07ams/prog/ecma262r3/10_Execution_Contexts.html#section-10.1.5
| 制御が任意の実行コンテキストに入る前に生成される、一意的な
| グローバルオブジェクトが存在する。…(snip)…たとえば、
| HTML 文書オブジェクトモデルにおけるグローバルオブジェクトの
| window プロパティは、グローバルオブジェクトそれ自身である。

もちろん、ネイティブではないメソッドを見かけ上区別しておきたいというのであれば、
それは各人の自由ですが。

> document.seikyu.nameでformに設定したname（この場合はseikyu）が取得される可能性がある

ああなるほど、name属性にアクセスしてしまうということなら、確かにそうですね。
だから、こここそ「手間を惜しまずに」document.forms['seikyu'].elements['name']
もしくは document.forms.seikyu.elements.name と正確に書くべきかと。

# そもそもこの省略記法はJavaScript 1.3までで、DOM1以降は無いはず。

13 名前：タカ： 2005/11/27 10:38 ［URL］: おはようございます。
m035さん、はるさん、zackさんどうもありがとうございました。
無事チェックすることが出来るようになりました。

>onsubmit="return blankCheck()" でしょ（>>0は正しいのに、本番で間違っている）
これはアホでした・・・記述忘れですね＞＜
チェックしている意味ありません。

>> return ture;
>誰かツッコんで（笑）
はい、これは完全なアホでした・・・（汗）
穴があったら入りたいとはこのことですね・・・

もう一つ致命的なボケがありました・・・
２７行目の「資料請求」へのリンクボタンに
<img src="gif/seikyu.gif" alt="" name="seikyu" width="48" height="20" border="0" id="seikyubutton">
というように name="seikyu" を使用していました・・・
つくづく勉強が足りないのだなぁと痛感いたしました。
これから精進していきたいと思います。

今回は皆さんに大変お世話になりました。
ありがとうございました。