入力フォームで正しいメールアドレスが入力されたのかを確認するため、以下のようなJavaScriptを記述しましたが、動作しません。
関数FormCheckは動作するのですが、関数Checkは動作しません。
現状では、メールアドレスを入力する欄に「www」とだけ入力しても
チェックされないので、その他の入力項目がきちんと入力できていれば
メール送信されてしまいます。
どのようにすればこのCheck関数が動作するのかどなたか教えていただけないでしょうか?よろしくお願いします。
--------------------Java Script 部分---------------------------
<script language="JavaScript">
<!--
//必須項目のチェック
function FormCheck(Form) {
Error = new Array();
i = 0;

// 氏名の入力チェック
if ((Form["name"]) && (Form["name"].value == "")) {
Error[i] = "氏名は必須項目です。";
i++;
}

// メールアドレスの入力チェック
if ((Form["email"]) && (Form["email"].value == "")) {
Error[i] = "メールアドレスは必須項目です。";
i++;
}


// 質問したい支店の選択チェック
if ((Form["address"]) && (Form["address"][0].selected == true)) {
Error[i] = "質問したい支店は必須項目です。";
i++;
}

// 未入力があればアラート
if (Error.length > 0) {
ErrorText = Error.join("\n");
alert ("未入力項目があるので送信できません。\n\n"+ErrorText);
return false;
}
}
// -->
<!--
//メールアドレスチェック
var mail;
function Check(){
mail = document.myform.email1.value;
if(!mail.match(/.*@.*\..*/i)){
alert("メールアドレスが不正です。");
}
}
// -->
</script>
--------------------HTML 部分-----------------------------------

<body>
<table width="419" height="453">
<tr>
<td width="732">
<form action="./cgi/test/sendmail.cgi" name="myform" method="POST" target="_self"
onSubmit="return FormCheck(this);Check()">
<table width="481">
<!--氏名を入力 -->
<tr>
<td><strong>氏名</strong></td>
<td><input type="text" name="name" size="30" maxlength="50"></td>
</tr>
<!--メールアドレスを入力 -->
<tr>
<td><strong>メールアドレス</strong></td>
<td><input type="text" name="email" size="50" maxlength="60"></td>
</tr>
<!--支店選択 -->
<tr>
<td><strong>質問したい支店</strong></td>
<td>
<select name="address">
<option value="" selected></option>
<option value="aaa@hoemail.com">A支店</option>
<option value="bbb@hoemail.com">B支店</option>
<option value="ccc@hoemail.com">C支店</option>
</select>
</td>
</tr>
</table>
<!--送信・キャンセルボタン -->
<center>
<table>
<tr>
<td><input type="submit" name="submit" value="送 信"></td>
<td><input type="reset" name="reset" value="キャンセル"></td>
</tr>
</table>
</center>
</form>
</td>
</tr>
</table>

このQ&Aに関連する最新のQ&A

A 回答 (3件)

※質問はなるべく分かりやすくしたほうが回答を得られやすいです。


・TABLEタグやCENTERタグなど、必要でないタグは省く

■どのようにすればこのCheck関数が動作するのか
Formタグにはonsubmit属性が定義されていますが、この内容だと
Check関数は値をチェックした後の事後処理に過ぎないです。

まず、FormCheck関数が値(真偽)を返した地点で、そのフォームは
値に応じて送信してしまいます。

ですので、この場合はFormCheck関数とCheck関数を一つの関数に
まとめてやる必要があります。

■なるべく元のソースを使って一つの関数にまとめてみました。
function FormCheck(Form) {
var Error = new Array();
// 氏名の入力チェック
if ((Form.name) && (Form.name.value == "")) {
Error.push("氏名は必須項目です。");
}
// メールアドレスの入力チェック
if ((Form.email) && (Form.email.value == "")) {
Error.push("メールアドレスは必須項目です。");
}
if (!document.myform.email.value.match(/.*@.*\..*/i)){
Error.push("メールアドレスが不正です。");
}
// 質問したい支店の選択チェック
if ((Form.address) && (Form.address[0].selected == true)) {
Error.push("質問したい支店は必須項目です。");
}
// 未入力があればアラート
if (Error.length > 0) {
ErrorText = Error.join("\n");
alert ("未入力項目があるので送信できません。\n\n" + ErrorText);
return false;
}
}
--------HTML---------
フォームのみ抜粋
<form action="./cgi/test/sendmail.cgi" name="myform" method="POST" target="_self"
onSubmit="return FormCheck(this);">

■スクリプトに対するアドバイス
・配列の要素の追加について
元のコードではi変数をカウンタとして要素を追加していましたね。
しかし、JavaScriptでは配列に要素を追加する関数としてpush関数が
用意されています。

非常によく使われる関数なので是非利用しましょう。
Error.push("message");

・フォーム内のエレメントへのアクセスについて
Form["email"]とするのも良いのですが、この場合は通常、
変数を利用してアクセスする場合に使用されます。

そのような用途がない場合は、普通に記述したほうが
いいです。
Form.email

・元のコード、Check関数について
var mail;
function Check(){
mail = document.myform.email1.value;
if(!mail.match(/.*@.*\..*/i)){
alert("メールアドレスが不正です。");
}
}
少し突っ込んだ話になりますが、apena2さんのためになると思うので
お話ししようと思います。

結論からいいますと、mail変数はローカル変数として宣言したほうが良いです。

この関数では、mail変数はグローバススコープすなわち、関数外で
宣言されていますよね。でも、Check関数を見る限りグローバル変数
である必要がありませんよね。

まず、これが第一の理由です。

そして、第2の理由についてですが、パフォーマンス面でのお話になります。
少しややこしくなるので、簡単に説明します。

Check関数がmail変数を参照するときに、まずCheck関数はローカルスコープ内(関数内)に
mail変数がないか探索します。そして、見つからなかった場合は、グローバルスコープ
すなわち関数外を探索することになります。。。

ということは、ローカル変数を探索するのに比べて、グローバルスコープを余分に
探索しなければならないので処理に時間がかかるのです。

このように、スコープチェーン(すみません、意味は調べてください)をたどるだけで
パフォーマンスが著しく低下してしまうのです。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございました。
教えていただきましたように修正をしたいと思います。
プログラミング初心者なのでパフォーマンス面までは
考えがおよびませんでした。
大変助かりました。ありがとうございました。

お礼日時:2009/05/25 15:06

functionは1つでいいんでないの


mail.match(/.*@.*\..*/i)ではチェックする意味ない(これだとアットマークドットだけでもOK)

--------------------Java Script 部分---------------------------
<script language="JavaScript">
<!--
//必須項目のチェック
function FormCheck(Form) {
Error = new Array();
i = 0;

// 氏名の入力チェック
if ((Form["name"]) && (Form["name"].value == "")) {
Error[i] = "氏名は必須項目です。";
i++;
}

// メールアドレスの入力チェック
if ((Form["email1"]) && (Form["email1"].value == "")) {
Error[i] = "メールアドレスは必須項目です。";
i++;
}


// 質問したい支店の選択チェック
if ((Form["address"]) && (Form["address"][0].selected == true)) {
Error[i] = "質問したい支店は必須項目です。";
i++;
}

// 未入力があればアラート
if (Error.length > 0) {
ErrorText = Error.join("\n");
alert ("未入力項目があるので送信できません。\n\n"+ErrorText);
return false;
}
var mail = document.myform.email1.value;
if(mail.match(/^[-+\w\.]+\@[-\w\.]+\.[a-z]{2,5}$/i)==null){alert("メールアドレスが不正です。");return false;}
}
// -->
</script>

--------------------HTML 部分-----------------------------------
<body>
<table width="419" height="453">
<tr>
<td width="732">
<form action="./cgi/test/sendmail.cgi" name="myform" method="POST" target="_self" onsubmit="return FormCheck(this)">
<table width="481">
<!--氏名を入力 -->
<tr>
<td><strong>氏名</strong></td>
<td><input type="text" name="name" size="30" maxlength="50"></td>
</tr>
<!--メールアドレスを入力 -->
<tr>
<td><strong>メールアドレス</strong></td>
<td><input type="text" name="email1" size="50" maxlength="60"></td>
</tr>
<!--支店選択 -->
<tr>
<td><strong>質問したい支店</strong></td>
<td>
<select name="address">
<option value="" selected></option>
<option value="aaa@hoemail.com">A支店</option>
<option value="bbb@hoemail.com">B支店</option>
<option value="ccc@hoemail.com">C支店</option>
</select>
</td>
</tr>
</table>
<!--送信・キャンセルボタン -->
<center>
<table>
<tr>
<td><input type="submit" name="submit" value="送 信"></td>
<td><input type="reset" name="reset" value="キャンセル"></td>
</tr>
</table>
    • good
    • 0
この回答へのお礼

ご回答ありがとうございました。
参考にさせていただきます。

お礼日時:2009/05/25 15:07

document.myform.email1.value では、 <input type="text" name="email" ...> の value を拾えないでしょう。

    • good
    • 0
この回答へのお礼

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

お礼日時:2009/05/25 15:08

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QERROR1062:Duplicate entry.....というエラーが出てしまいました

いつもお世話になります。
データベースからSELECTで抽出したデータを別のテーブルにINSERTするSQLを実行したのですが、
ERROR1062:Duplicate entry.....というエラーが出てしまいました。
お詳しい方がいらっしゃいましたら、アドバイスをいただけませんでしょうか?よろしくお願いいたします。
【実行したSQL】
INSERT INTO tblA (dataA1, dataA2, dataA3, dataA4) SELECT "9001","AA",dataB1,dataB2 FROM tblB WHERE dataB1 = 52

tblAの主キー:dataA1とdataA2
tblBの主キー:dataB1

dataA1とdataA2はtblAの主キーとなっているため、重複してしまうということのようです。tblBの主キーはdataB1であるため、抽出されてくるデータは常に1件なので問題ないと期待していましたが、甘くなかったようです。何か良い方法はないものでしょうか?よろしくお願いいたします。

Aベストアンサー

「ERROR 1062」は、重複データを格納しようとした場合に出力されるエラーです。
既にdataA1='9001'&dataA2='AA'という行が、tblAに格納されているのですよね?

>抽出されてくるデータは常に1件なので問題ないと期待していました

「insert ~ select ~」を実行前に、既に同じデータが格納されているのでは?
あるいはprimary keyの指定が、質問中に記された通りでなく、2件以上検索されているかです。

>何か良い方法はないものでしょうか?

何をするための方法を、聞きたいのかが分かりませんが?


人気Q&Aランキング

おすすめ情報