javascriptでメールアドレスが同一か確認

質問

javascriptでメールアドレスが同一か確認

現在、問い合わせフォームをつくっております。
必須項目を部分的に作るのまではできたのですが、
メールアドレスを必須項目にしつつ、
メールアドレス確認の欄で同一のアドレスが記入されているのかを確かめ、
違った場合は「違います」とアラートをだしたいのです。

どのようにしたらいいのでしょうか？

急ぎの為大変困っております。
どうかご回答お願い致します。

以下はこちらのサイトを参考に作成しました
http://f32.aaa.livedoor.jp/~azusa/?t=js&p=formcheck#a_chkHissu

------java部分-----

<script type="text/javascript">
function sample(frm){
/* 必須入力のname属性 */
var hissu=Array("name","hurigana","mail","mail2","naiyo");
/* アラート表示用 */
var hissu_nm = Array("お名前","ふりがな","メールアドレス","メールアドレス確認","内容");
/* 必須入力の数 */
var len=hissu.length;
for(i=0; i<len; i++){
var obj=frm.elements[hissu[i]];
/* テキストボックス or テキストエリアが入力されているか調べる */
if(obj.type=="text" || obj.type=="textarea"){
if(obj.value==""){
/* 入力されていなかったらアラート表示 */
alert(hissu_nm[i]+"は必須入力項目です");
/* 未入力のエレメントにフォーカスを当てる */
frm.elements[hissu[i]].focus();
return false;
}
}else{
/* radioボタンがチェックされているか調べる */
for(var j=0, chk=0; j<obj.length; j++){
/* チェックされていたらchkフラグをプラス */
if(obj[j].checked) chk++;
}
if(chk==0){
/* 1つもチェックされていない場合はfalseを返してフォーム送信しない */
alert(hissu_nm[i]+"は必須入力項目です");
return false;
}

}
}
/* 必須入力項目が全て入力されている場合はtrueを返してフォーム送信 */
return true;
}
</script>

------html部分-----

<form action="mail/●◎●.php" name="toiawase" method="post" onsubmit="return sample(this)">
~省略~
メールアドレス<input type="text" name="mail" value="" size="35" maxlength="60">
メールアドレス確認<input type="text" name="mail2" value="" size="35" maxlength="60">
</form>

宜しくお願い致します。

回答No.10

tasoh · ベストアンサー

ああ、nameからチェックボックスを取得してますね・・・
これじゃnameを片方変えるのはダメですね（汗）

　　var count = 0;
　　var obj=frm.elements["soudan"];　　//←ここ
　　/* checkboxがチェックされているか調べる */
　　for (var i=0;i < obj.length; i++)
　　{
　　　　if(obj[i].checked)
　　　　　　count++;
　　}
　　if(count==0)
　　{
　　　　alert("ご相談内容を入力して下さい");
　　　　return false;
　　}

多分、PHPが同じ名前のnameが複数個あることを意識して作られてないからかと。
PHPを書きかえれる自信がなければ、JavaScriptのほうで、見えないTextBoxを作っておいて
それを参照するようにしたらいいと思います。

１）見えないテキストボックス（textarea）を設置（CSSのdisplayをnoneにすれば見えない）
２）【送信】ボタンを押したら、一通りのチェックをいままでと同じく行う。
３）OKだったら、チェックボックスのチェックされた内容を取得して見えないテキストボックスに入れる
チェックボックスのあたりにその処理を入れる。↓
-----------------------------------
　　frm.elements["hiddenTextBox"].value = "";　　//初期化
　　var count = 0;
　　var obj=frm.elements["soudan"];
　　/* checkboxがチェックされているか調べる */
　　for (var i=0;i < obj.length; i++)
　　{
　　　　if(obj[i].checked)
　　　　{
　　　　　　var kugiri = "/";
　　　　　　if(count==0)
　　　　　　　　kugiri = "";
　　　　　　frm.elements["hiddenTextBox"].value += kugiri + obj[i].value;
　　　　　　count++;
　　　　}
　　}
　　if(count==0)
　　{
　　　　alert("ご相談内容を入力して下さい");
　　　　return false;
　　}
-----------------------------------

見えないテキストボックスは、チェックボックスのうしろにでも入れておきます。
<textarea height="0" width="0" value="" name="hiddenTextBox" style="display:none;"></textarea>

あとは何とかしてチェックボックス自身の値を表示させないようにする・・とかして。
（↑そのあたりはお任せします。多分PHP側の処理になるかと）

なんだかやっつけっぽい回答で申し訳ないです。
期待通りの動きになるといいですね。

お礼

何度も本当にありがとうございます。

勉強が足りない為、教えて下さったことを理解できませんでした・・・

が、以下のようにしたらできました・・・！

------java部分--------

　　/* ご相談内容 */
if ((frm.soudan1.checked == false) &&
(frm.soudan2.checked == false)) {

alert("ご相談内容を入力して下さい");
return false ;
}

-----HTML部分-----

<input type="checkbox" name="soudan1" value="A_nitsuite">Aについてのご相談
<input type="checkbox" name="soudan2" value="B_nitsuite">Bについてのご相談

やっと完成し、一安心です。
何度も何度も質問に答えて下さり、本当に本当にありがとうございました・・・！！！

回答No.9

tasoh

phpを見てみないと何とも言えないです（見ても分からないかもですがｗ）
多分nameが同じなのが関係してると思います。

チェックボックスの5つあるうちの一つしか表示されなくて
表示されるのはその一番最後だったりすると、その可能性が高いです。
（phpの処理にもよりますが）
試しに違うのにしてみてください。

お礼

ご回答ありがとうございます。
表示されるのは一番最後のものです。

<input type="checkbox" name="soudan" id="soudan1" value="A_nitsuite">Aについてのご相談
<input type="checkbox" name="soudan" id="soudan2" value="B_nitsuite">Bについてのご相談
これを

nameを片方変えて

<input type="checkbox" name="soudan" id="soudan1" value="A_nitsuite">Aについてのご相談
<input type="checkbox" name="soudan_2" id="soudan2" value="B_nitsuite">Bについてのご相談

にしましたが、
両方チェックを入れて送信しても、入力して下さいのjavaがでてきます。

javaは

var count = 0;
　　var obj=frm.elements["soudan"];
　　/* checkboxがチェックされているか調べる */
　　for (var i=0;i < obj.length; i++)
　　{
　　　　if(obj[i].checked)
　　　　　　count++;
　　}
　　if(count==0)
　　{
　　　　alert("ご相談内容を入力して下さい");
　　　　return false;
　　}

になります。

すみません、やはりPHPが原因なのでしょうか？

回答No.8

tasoh

ところどころ文法が間違ってました。
これでいけるかと↓

　　var count = 0;
　　var obj=frm.elements["soudan"];
　　/* checkboxがチェックされているか調べる */
　　for (var i=0;i < obj.length; i++)
　　{
　　　　if(obj[i].checked)
　　　　　　count++;
　　}
　　if(count==0)
　　{
　　　　alert("ご相談内容を入力して下さい");
　　　　return false;
　　}

<input type="checkbox" name="soudan" id="soudan1" value="1nitsuite">●についてのご相談
<input type="checkbox" name="soudan" id="soudan2" value="2nitsuite">●◎についてのご相談

どこが違ったかは、前と見比べてみてください＾＾
変数名やら変数の宣言あたりです。

あと、HTMLの注意ですが、idは同じページに複数定義するのはちょっとまずいです。
なので、チェックボックスのidは数字を振って違うものにしました。

※表立ってエラーは出てこないのですが
予期せぬ動きをする時があるみたいです（私もよくわかってないですが...）

お礼

ご回答ありがとうございます！
ちゃんとでいるようになりました、本当にありがとうございます！！

idは気をつけようと思います。
教えて下さりありがとうございます。

ですが、checkboxで複数チェックして送信しても、
メールだと選んだうちの一つしか表示されません・・・

nameが一緒だからでしょうか？

申し訳ありませんがご回答お願い致します・・・。

回答No.7

tasoh

あー、判定の順番が変わってしまいましたからね・・・
うーん苦肉の策がこちら↓
※かなり変わってしまいましたが

<script type="text/javascript">
function sample(frm)
{
　　var nam = frm.elements["name"].value;
　　if(nam==""){
　　　　alert("お名前を入力してください");
　　　　return false;
　　}
　　var huri = frm.elements["hurigana"].value;
　　if(huri=="")
　　{
　　　　alert("ふりがなを入力してください");
　　　　return false;
　　}
　　var m1 = frm.elements["mail"].value;
　　var m2 = frm.elements["mail2"].value;
　　if(m1=="")
　　{
　　　　alert("メールアドレスを入力してください");
　　　　return false;
　　}
　　if(m2=="")
　　{
　　　　alert("メールアドレス確認を入力してください");
　　　　return false;
　　}
　　if(m1 != m2)
　　{
　　　　alert("同一のメールアドレスを入力してください");
　　　　return false;
　　}
　　var nai = frm.elements["naiyo"].value;
　　if(nai=="")
　　{
　　　　alert("内容を入力してください");
　　　　return false;
　　}
}
</script>

<form action="" name="toiawase" method="post" onsubmit="return sample(this)">
お名前<input type="text" name="name" value="" size="35" maxlength="60">
ふりがな<input type="text" name="hurigana" value="" size="35" maxlength="60">
メールアドレス<input type="text" name="mail" value="" size="35" maxlength="60">
メールアドレス確認<input type="text" name="mail2" value="" size="35" maxlength="60">
<textarea height="100" width="300" name="naiyo"></textarea>
<input type="submit" value="送信">
</form>

ただ、ラジオボタンのチェックは行ってません。
ラジオボタンにnameが入っていれば

var obj=frm.elements[ラジオボタンのname];
/* radioボタンがチェックされているか調べる */
for(var j=0, chk=0; j<obj.length; j++)
{
　　/* チェックされていたらchkフラグをプラス */
　　if(obj[j].checked)
　　　　chk++;
}
if(chk==0)
{
　　/* 1つもチェックされていない場合はfalseを返してフォーム送信しない */
　　alert(hissu_nm[i]+"は必須入力項目です");
　　return false;
}

をつけ足せば大丈夫かと。
かなりやっつけですが・・・試してみてください。
あと、nameは適当なので、自分で調節してください・・・

お礼

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

教えて下さったjavascriptで全て上手くいきました。
作って下さり、本当にありがとうございます。

ただ、radioの

if(chk==0)
{
　　/* 1つもチェックされていない場合はfalseを返してフォーム送信しない */
　　alert(hissu_nm[i]+"は必須入力項目です");
　　return false;
}

のhissu_nm[i]+"は必須入力項目です"

はhissu_nm[i]の部分にhtml内でラジオにつけている、例えば商品名としますと、

「商品名は必須入力項目です」、とでてくるのでしょうか？

すみません、hissu_nm[i]+というのが教えて下さったjavascriptに
入っていなかったもので・・・

お手数かけますがご回答お願い致します。

補足

質問者です。

すみません、radioは

var obj=frm.elements["house_type"];
/* radioボタンがチェックされているか調べる */
for(var j=0, chk=0; j<obj.length; j++)
{
　　/* チェックされていたらchkフラグをプラス */
　　if(obj[j].checked)
　　　　chk++;
}
if(chk==0)
{
　　/* 1つもチェックされていない場合はfalseを返してフォーム送信しない */
　　　　alert("●◎を入力して下さい");
　　　　return false;
}

にし、何個もradio項目がある為
それに応じえ↑も増やすと可能になりました。

ありがとうございます！

ですがcheckboxが反応せず、

-------java部分----------

var obj=frm.elements["soudan"];
/* checkboxがチェックされているか調べる */
for (var i=0;i < eles.length; i++)
{
if(eles[i].checked){
count++;
}
}
if(count==0){
　　　　alert("ご相談内容を入力して下さい");
　　　　return false;
}

-------HTML部分---------

<input type="checkbox" name="soudan" id="soudan" value="1nitsuite">●についてのご相談
<input type="checkbox" name="soudan" id="soudan" value="2nitsuite">●◎についてのご相談

としてもエラーになってしまいます。
どうすれば宜しいでしょうか？

重ね重ね、申し訳ありません。
宜しくお願い致します。

回答No.6

tasoh

No1です。
あれれ、という事は、nameが問題ですね。
中身を取得するのにidに書き換えてしまったから、nameがmailのものが見つからないということでしょうか。

---------------------------------------------
メールアドレス<input type="text" id="mail" name="mail" value="" size="35" maxlength="60">
メールアドレス確認<input type="text" id="mail2" name="mail2" value="" size="35" maxlength="60">
---------------------------------------------

と、nameをつけてあげれば大丈夫ですかね・・・
情報を小出しにしてしまってて申し訳ないです。
これでできるといいのですが、どうでしょうか？

お礼

入れ違いですみません、その通りでした！
本当に本当に、何度もありがとうございます。

（下の補足にも同じ文章がありますが・・・一応）

度々すみません。

nameをidに変えたのが原因なのではと思い、

id="mail"のところに新しくname="address"も入れたら

届いたメールにaddressの項目ができ、
入力したメールアドレスが表示されました！

本当にすみません、ありがとうございました。

あと、すみません・・・

フォームの項目の並び順が

「名前、ふりがな、メールアドレス、メールアドレス確認、内容」

となっているのですが、

テストの為に上から順に項目の入力を行っても、

項目のエラーが

「名前、ふりがな、内容、メールアドレス、メールアドレス確認」

という順番でポップアップとして表示されます。

これをフォームの順と一緒の

「名前、ふりがな、メールアドレス、メールアドレス確認、内容」

にすることはできますか？

下手な説明ですが伝わったでしょうか・・・

本当に申し訳ありません。
宜しくお願い致します。

回答No.5

tasoh

No1です。
いけましたか、よかったです＾＾
macは使ったことないので分からないですが
そこまでできたらあとは簡単です（多分）

mailがこないとのことですが、確認メールをmail2としていたため
一つ目のメールをmail1と、数字を振ってしまっているからです。
（たぶんphp内でmailが来ることを期待してるのにmail1なため、違うと思ってスルーしてるのかと）
JavaScriptとHTMLのidのmail1をmailにすればできると思います。

お礼

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

JavaScriptとHTMLのmail1をmailにしましたが、

届かないままです・・・

他に原因などあるのでしょうか？

何度も申し訳ありませんが宜しくお願い致します。

補足

度々すみません。

nameをidに変えたのが原因なのではと思い、

id="mail"のところに新しくname="address"も入れたら

届いたメールにaddressの項目ができ、
入力したメールアドレスが表示されました！

本当にすみません、ありがとうございました。

あと、すみません・・・

フォームの項目の並び順が

「名前、ふりがな、メールアドレス、メールアドレス確認、内容」

となっているのですが、

テストの為に上から順に項目の入力を行っても、

項目のエラーが

「名前、ふりがな、内容、メールアドレス、メールアドレス確認」

という順番でポップアップとして表示されます。

これをフォームの順と一緒の

「名前、ふりがな、メールアドレス、メールアドレス確認、内容」

にすることはできますか？

下手な説明ですが伝わったでしょうか・・・

本当に申し訳ありません。
宜しくお願い致します。

回答No.4

tasoh

No1です。
うーん、エラー内容とかが分かればいいんですが・・・
スルーされるとなると何でしょうか。

------------------------------
メールアドレス<input type="text" name="mail" value="" size="35" maxlength="60">
メールアドレス確認<input type="text" name="mail2" value="" size="35" maxlength="60">
------------------------------
というところ、

------------------------------
メールアドレス<input type="text" id="mail1" value="" size="35" maxlength="60">
メールアドレス確認<input type="text" id="mail2" value="" size="35" maxlength="60">
------------------------------
に書き換えてみてもダメでしょうか？

var m1 = document.getElementById("mail1");
var m2 = document.getElementById("mail2");

の後ろに
alert(m1);
alert(m2);

と記述してみて、nullと表示された場合は、idの指定が間違ってるという事なので
たぶんそこらへんだと思うのですが・・・

ブラウザはIEでしょうか？
IEでしたら、エラーのとき左下に黄色い三角のマークが表示されますが
ここをダブルクリックするとエラーの詳細がみれたりします。
おおよそのエラー行も分かるので便利です。
確認してみてください。

お礼

ご回答ありがとうございます！！
nameをidに変えたらできることができました！
本当にありがとうございます。

メッセージに

「メールアドレス確認を入力してください」

を入れたかったので、

var m1 = document.getElementById("mail1");
var m2 = document.getElementById("mail2");
if(m1.value=="")
{
alert("メールアドレスを入力してください");
return false;
}
if(m2.value=="")
{
alert("メールアドレス確認を入力してください");
return false;
}
if(m1.value == m2.value)
return true;

alert("同一のメールアドレスを入力してください");
return false;

としてみたところ、うまくいきました。

本当にありがとうございます。

ですが、

何故か届いたテストメールからmailの項目が消えてしまいました。

宜しければご回答お願い致します・・・。

重ね重ね、申し訳ありません。

ちなみに、使っているのはmacです。

回答No.3

tasoh

No1です。
たびたびすみません。
今見ていて気付いたのですが、他にも入力個所があり
ラジオボタンなども判定に付けてるのですね・・・
ちょっと見づらかったのでインデントしてみて気付きました(汗)

<script type="text/javascript">
function sample(frm)
{
　　/* 必須入力のname属性 */
　　var hissu=Array("name","hurigana","mail","mail2","naiyo");
　　/* アラート表示用 */
　　var hissu_nm = Array("お名前","ふりがな","メールアドレス","メールアドレス確認","内容");
　　/* 必須入力の数 */
　　var len=hissu.length;
　　for(i=0; i<len; i++)
　　{
　　　　var obj=frm.elements[hissu[i]];
　　　　/* テキストボックス or テキストエリアが入力されているか調べる */
　　　　if(obj.type=="text" || obj.type=="textarea")
　　　　{
　　　　　　if(obj.value=="")
　　　　　　{
　　　　　　　　/* 入力されていなかったらアラート表示 */
　　　　　　　　alert(hissu_nm[i]+"は必須入力項目です");
　　　　　　　　/* 未入力のエレメントにフォーカスを当てる */
　　　　　　　　frm.elements[hissu[i]].focus();
　　　　　　　　return false;
　　　　　　}
　　　　}
　　　　else
　　　　{
　　　　　　/* radioボタンがチェックされているか調べる */
　　　　　　for(var j=0, chk=0; j<obj.length; j++)
　　　　　　{
　　　　　　　　/* チェックされていたらchkフラグをプラス */
　　　　　　　　if(obj[j].checked)
　　　　　　　　　　chk++;
　　　　　　}
　　　　　　if(chk==0)
　　　　　　{
　　　　　　　　/* 1つもチェックされていない場合はfalseを返してフォーム送信しない */
　　　　　　　　alert(hissu_nm[i]+"は必須入力項目です");
　　　　　　　　return false;
　　　　　　}
　　　　}
　　}
　　/* 必須入力項目が全て入力されている場合はtrueを返してフォーム送信 */
　　return true;
}
</script>

この場合だと、hissuという配列に必須項目のnameが定義してあるので
そこからまずmailとmail2をはずし
forのくくりの後ろにある
return true;を
------------------------------------------------
var m1 = document.getElementById("mail1");
var m2 = document.getElementById("mail2");
if(m1.value=="" || m2.value=="")
{
alert("メールアドレスを入力してください");
return false;
}
if(m1.value == m2.value)
return true;

alert("同一のメールアドレスを入力してください");
return false;
------------------------------------------------
に置き換えたらいけそうな気がします。
よく見ずに回答してしまいまして申し訳ないです。
試してみてください＾＾

お礼

何度も詳しいご回答を本当にありがとうございます！

　　/* 必須入力のname属性 */
　　var hissu=Array("name","hurigana","mail","mail2","naiyo");
　　/* アラート表示用 */
　　var hissu_nm = Array("お名前","ふりがな","メールアドレス","メールアドレス確認","内容");

から

"mail","mail2",
"メールアドレス","メールアドレス確認",

を削除し、

-------------------------
～省略～

　　　{
　　　　　　　　/* チェックされていたらchkフラグをプラス */
　　　　　　　　if(obj[j].checked)
　　　　　　　　　　chk++;
　　　　　　}
　　　　　　if(chk==0)
　　　　　　{
　　　　　　　　/* 1つもチェックされていない場合はfalseを返してフォーム送信しない */
　　　　　　　　alert(hissu_nm[i]+"は必須入力項目です");
　　　　　　　　return false;
　　　　　　}
　　　　}
　　}
　　/* 必須入力項目が全て入力されている場合はtrueを返してフォーム送信 */
　　return true;
}
</script>

の最後のreturn true;を教えて下さった

var m1 = document.getElementById("mail1");
var m2 = document.getElementById("mail2");
if(m1.value=="" || m2.value=="")
{
alert("メールアドレスを入力してください");
return false;
}
if(m1.value == m2.value)
return true;

alert("同一のメールアドレスを入力してください");
return false;

に置き換えたのですが、

それ以外のお名前、ふりがな、内容には反応するものの、
メールアドレスには反応せずスルーされます・・・。

何か他に方法はありますか？
お手数かけますがお願い致します。

回答No.2

tasoh

No1です。
すみません、はしょりすぎでしたね（汗）
どう分からないのかが分からないので的外れかもしれませんが説明します。

JavaScriptでは
-------------
function 関数名(引数)
{

}
-------------
という{から}の間が一つのくくりになっています。
なので、見せていただいたJavaScriptの部分は
function sample(frm)
{

}
が一つのくくりです。
その{}の中にいろいろな判定処理（メールアドレスが入力されているか）
などを書き、ボタンが押されたときにその関数を読んで判定処理を行うということなのですが

JavaScriptの部分は、{}の中を私の示したJavaScriptの{}内に置き換えてみてください。
置き換えるのが怖ければ、もともと書いていたJavaScriptの関数名が今sampleになってると思いますが、その関数のくくりの下あたりに、私が書いたJavaScriptの関数名をsample2などとして名前を変えて貼り付けておいて

<form action="mail/●◎●.php" name="toiawase" method="post" onsubmit="return sample(this)">
~省略~
メールアドレス<input type="text" name="mail" value="" size="35" maxlength="60">
メールアドレス確認<input type="text" name="mail2" value="" size="35" maxlength="60">
</form>

の一行目
<form action="mail/●◎●.php" name="toiawase" method="post" onsubmit="return sample(this)">
の
onsubmit="return sample(this)"
の部分、この部分で関数を呼んでいますので
onsubmit="return sample2(this)"
と書き変えてみてください。

あと
メールアドレス
<input type="text" id="mail1" value="" size="35" maxlength="60">
メールアドレス確認
<input type="text" id="mail2" value="" size="35" maxlength="60">
の部分ですが、idというのが入力内容を取得するのに必要なので外さないようにしてください。

分からなかったらすみません・・・
できなければ、もう少し詳細をお願いします。

回答No.1

tasoh

いろいろはしょりましたが、何も入力されていない・どちらかが違う・一致している
の3つだけチェックしてみました。こんな感じでどうでしょうか。
-------------------------------------------------------
<script type="text/javascript">
function sample(frm)
{
var m1 = document.getElementById("mail1");
var m2 = document.getElementById("mail2");
if(m1.value=="" || m2.value=="")
{
alert("メールアドレスを入力してください");
return false;
}
if(m1.value == m2.value)
return true;

alert("同一のメールアドレスを入力してください");
return false;
}
</script>

<form action="mail/●◎●.php" name="toiawase" method="post" onsubmit="return sample(this);">
メールアドレス
<input type="text" id="mail1" value="" size="35" maxlength="60">
メールアドレス確認
<input type="text" id="mail2" value="" size="35" maxlength="60">
<input type="submit" value="送信">
</form>

お礼

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

お恥ずかしい質問ですが、
どこに以下を入れればいいのでしょうか？

function sample(frm)
{
var m1 = document.getElementById("mail1");
var m2 = document.getElementById("mail2");
if(m1.value=="" || m2.value=="")
{
alert("メールアドレスを入力してください");
return false;
}
if(m1.value == m2.value)
return true;

alert("同一のメールアドレスを入力してください");
return false;
}

質問に記載したjavascript内に入れても反応しません。

今はhtmlの上にそのままjavascriptを記入しているので、
上記の部分だけを
<script src="js/●◎.js" type="text/javascript"></script>
のようにしてみたり、
他にも色々重複部分っぽいところ？を削ったりしてみたのですが、エラーがおきてしまいました。

大変厚かましいのは重々承知ですが、
補足、又は、はしょっていないご回答をお願い致します。