- ベストアンサー
メールフォームエラー表示について
お世話になります。 以下のフォーム内容エラー表示のスクリプトはWinIEでは動作するのですが、Firefox、Safariでは動作しません。なぜでしょうか？ご教授下さい。 又、メールアドレスを２つ入力個所を設け、その二つが異なる場合エラーを出したいのですが、どうしたらいいでしょうか？ そして、あるチェックボックスにチェックを入れて場合のみ送信ボタンが押すことができるようにするにはどうしたらいいでしょうか？ 度重なる質問で申し訳ありません。 何卒宜しくお願い致します。 <html> <head> <script type="text/javascript"> <!-- // メールアドレスチェック function isAddress(address) { if(address.indexOf("@",0)<=0) { return false; } else { return true; } } // submit可能か判定(form1) function jdgSubmit1() { var errItem = ""; // お名前が空の場合 if (document.form1.item('name1').value == null || document.form1.item('name1').value == "") { errItem = errItem + "お名前を入力して下さい。<br />"; document.form1.item('name1').style.backgroundColor = "#BBBBBB"; } else { document.form1.item('name1').style.backgroundColor = "#ffffff"; } // ふりがなが空の場合 if (document.form1.item('name2').value == null || document.form1.item('name2').value == "") { errItem = errItem + "ふりがなを入力して下さい。<br />"; document.form1.item('name2').style.backgroundColor = "#BBBBBB"; } else { document.form1.item('name2').style.backgroundColor = "#ffffff"; } // E-mailが空の場合 if (document.form1.item('eaddress').value == null || document.form1.item('eaddress').value == "") { errItem = errItem + "メールアドレスを入力して下さい。<br />"; document.form1.item('eaddress').style.backgroundColor = "#BBBBBB"; } else { if (!isAddress(document.form1.item('eaddress').value)) { errItem = errItem + "正しいメールアドレスを入力して下さい。<br />"; document.form1.item('eaddress').style.backgroundColor = "#BBBBBB"; } else { document.form1.item('eaddress').style.backgroundColor = "#ffffff"; } } // 本文が空の場合 if (document.form1.item('content').value == null || document.form1.item('content').value == "") { errItem = errItem + "お問い合わせ内容を入力して下さい。<br />"; document.form1.item('content').style.backgroundColor = "#BBBBBB"; } else { document.form1.item('content').style.backgroundColor = "#ffffff"; } // エラーがあるか確認 if (errItem != "") { err.innerHTML = errItem; return false; } document.form1.submit(); } --> </script> </head> <body> <form name="form" action="mail-send.php" method="POST"> <div id="err"></div> <div> <table cellspacing="0" cellpadding="0"> <tr> <td>お名前</td> <td><input type="text" name="name1" size="30" maxlength="100" /></td> </tr> <tr> <td>ふりがな</td> <td><input type="text" name="name2" size="30" maxlength="100" /></td> </tr> <tr> <td>E-mail</td> <td><input type="text" name="eaddress" size="30" maxlength="100" /></td> </tr> <tr> <td>本文</td> <td><textarea name="content" rows="6" /></textarea></td> </tr> </table> </div> <input type="submit" value="送信" name="submit" id="submit" onClick="jdgSubmit1();return false" /> </form> </body> </html>
- kssnb_2007
- お礼率50% (4/8)
- JavaScript
- 回答数8
- ありがとう数5
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは 色々な意見が出ているようで困惑されるかもしれませんが・・・ 補足が入っているようなのでそちらを答えさせてもらいます 【<li>はエラー表示でも使用しているので（そのままだと赤字になるので）スタイルシートに以下を追加してください】 ul li { color:black; } 【javascript内に以下を追加】 function check(n) { if(n == "同意する") { document.getElementById("send").disabled = false; }else { document.getElementById("send").disabled = true; } } 【ラジオボタンのところと送信ボタンを以下に変更】 <div> <ul> <li><input name="agree" type="radio" value="同意する" onClick="check(this.value)">同意する</li> <li><input name="agree" type="radio" value="同意しない" onClick="check(this.value)" checked>同意しない</li> </ul> </div> <input type="button" value="送信" onClick="able()" id="send" disabled>
その他の回答 (7)
- Chaire
- ベストアンサー率60% (79/130)
<!-- 属性値内の & を避けるため、A && B <==> !(!A || !B) --> <form action="mail-send.php" method="post" onsubmit=" return !(!validate(this, { callback: function (n) { return n.value != ''; }, targets: [ [ 'name1', 'お名前を入力して下さい。' ], [ 'name2', 'ふりがなを入力して下さい。' ], [ 'eaddress1', 'メールアドレスを入力して下さい。' ], [ 'eaddress2', 'メールアドレス（確認）を入力して下さい。' ], [ 'content', 'お問い合わせ内容を入力して下さい。' ] ] }, { callback: function (n) { return n.value.match(/[^@]+@[^@]+/); }, targets: [ [ 'eaddress1', '正しいメールアドレスを入力して下さい。' ], [ 'eaddress2', '正しいメールアドレス（確認）を入力して下さい。' ] ] }, { callback: function (n1, n2) { return n1.value == n2.value; }, targets: [ [ 'eaddress1', 'eaddress2', 'メールアドレスを確認して下さい。' ] ] } ) || !confirm ('送信します。よろしいですか？'));"> <!-- 文法的に必須のものと、今必要なもの以外は省略 --> <p> お名前<input name="name1" /> ふりがな<input name="name2" /> E-mail<input name="eaddress1" /> E-mail（確認）<input name="eaddress2" /> 本文<textarea name="content" rows="6" cols="30"></textarea> 同意する<input type="checkbox" name="agree" onmousedown="activate(this, 'submit');" /> <input type="submit" name="submit" value="送信" /> </p> </form> <script type="text/javascript">//<![CDATA[ /* IE が対象となる時点で DOM2/3 の XML/XHTML モジュールは使えない。 XHTML でも text/html で扱われる可能性が高いので名前空間 URI も無意味。 その代わり DHTML の名残である DOM-HTML を使用できる可能性が高い。 DOM-HTML では、 ・document.forms のような昔ながらの要素コレクション参照が可能。 ・要素の属性がオブジェクトのプロパティとして露出するので get|setAttribute が不要。 ・要素のタグ名（tagName、nodeName）・属性名は必ず大文字を返す。 ・リスト型属性の値は必ず小文字を返す（'checkbox'、'submit'、'radio'）。 なお、Element.tagName は DOM1 以上の実装なら例外なく持っている。 Node.localName は DOM2 で導入されたものだから IE は対応していない。 Safari は X(HT)ML モードで Node.localName が null を返すバグがあった気がする。 */ if (document.implementation && document.implementation.hasFeature('HTML', '1.0') && // ! document.documentElement.namespaceURI && typeof Function.prototype != 'undefined' && typeof Function.prototype.apply != 'undefined') { window.onload = function () { var d = document; var form = d.getElementsByTagName('form')[0]; var ul = form.insertBefore(d.createElement('ul'), form.firstChild); var li = ul.appendChild(d.createElement('li')); li.appendChild(d.createTextNode('同意後、送信して下さい。')); form.elements['agree'].checked = false; form.elements['submit'].disabled = true; }; window.validate = function (form) { var ul = form.firstChild; var li = ul.firstChild; while (ul.childNodes[1]) ul.removeChild(ul.childNodes[1]); var cache = { }; var targets, message, ok, i, j, k; for (i = 1; i < arguments.length; i++) { for (j = 0; j < arguments[i].targets.length; j++) { targets = arguments[i].targets[j]; message = targets.pop(); for (k = 0; k < targets.length; k++) { if (typeof cache[targets[0]] == 'undefined') cache[targets[0]] = true; targets.push(form.elements[targets.shift()]); } ok = arguments[i].callback.apply(null, targets); for (k = 0; k < targets.length; k++) { cache[targets[k].name] = (ok && cache[targets[k].name]); confirm(targets[k], cache[targets[k].name]); } if (!ok) alert(message); } } return ul.childNodes.length < 2; function confirm (node, ok) { if (ok) { node.style.background = '#fff'; } else { node.style.background = '#bbb'; } } function alert (message) { var n = ul.appendChild(li.cloneNode(true)); n.firstChild.data = message; } }; window.activate = function (control, targetName) { control.form.elements[targetName].disabled = control.checked; }; } //]]></script>
お礼
参考にさせて頂きます。 ありがとうございました。
- himajin100000
- ベストアンサー率54% (1660/3060)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link rel="stylesheet" href="Q3205193-1.css" /> <script type="text/javascript" src="Q3205193-1.js"></script> <title>Q3205193 テストケース1</title> </head> <body onload="init();"> <p>原型がなくなった。</p> <div id="err"></div> <form id="form1" action="mail-send.php" method="post"> <div> <p>全ての欄は入力必須です。</p> <table summary="入力欄"> <caption>入力欄</caption> <tr> <th>お名前</th> <td><input type="text" id="name1" size="30" maxlength="100" value="" /></td> </tr> <tr> <th>ふりがな</th> <td><input type="text" id="name2" size="30" maxlength="100" value="" /></td> </tr> <tr> <th>E-mail</th> <td><input type="text" id="eaddress" size="30" maxlength="100" value="" /></td> </tr> <th>E-mail(確認用)</th> <td><input type="text" id="eaddress2" size="30" maxlength="100" value="" /></td> </tr> <tr> <th>本文</th> <td><textarea id="content" rows="6" cols="30"></textarea></td> </tr> <tr> <!-- チェックボックスでなくとなりのテキストをクリックしてもうまくいきますが、 どうしても嫌だったらlabel要素をはずしてください。 なお、Safariでは赤くなりません。 --> <th>『質問者がhimajin100000に絶対服従すること』に同意しますか？</th> <td><label id="agree"><input type="checkbox" id="Agreement" size="30" maxlength="100" for="agree"/>同意する</label></td> </tr> <!-- 今回は使わない <tr> <th>国を選択してください</th> <td> <select id="Country"> <optgroup> <option value="echizen">越前</option> <option value="ecchuu">越中</option> <option value="echigo">越後</option> </optgroup> <optgroup> <option value="bizen">備前</option> <option value="bicchuu">備中</option> <option value="bigo">備後</option> </optgroup> </select> </td> </tr> --> </table> </div> <ul> <li><input type="button" value="チェック" onclick="Judge();" /></li> <li><input type="submit" value="送信" id="submit"/></li> </ul> </form> </body> </html> =======Q3205193-2.js====== var stderr; function init(){ document.getElementById("submit").setAttribute("disabled","disabled"); stderr = document.createElement("ul") document.getElementById("err").appendChild(stderr); } function clearstderr(){ while(stderr.hasChildNodes()){ stderr.removeChild(stderr.firstChild); } } // メールアドレスチェック function isAddress(address) { if(address.indexOf("@",0)<=0) { return "メールアドレスが正しくありません。"; } else { return null; } } function isAddress2(address) { var address1 = document.getElementById("eaddress"); if (address != address1.value){ return "確認用アドレスと一致しません。"; } else { if (isAddress(address1.value) != null) { return ""; } return null; } } function isAgree(reply){ if (reply == true){ return null; } else { return false; } } function Validate(name,delegate,missingerror,isnormal){ /* delegateにみたいにした方が後々検証の追加が楽かな、と。 */ var element = document.forms["form1"].elements[name]; var value; var result; var error; var localName; //Safariだとtypeの条件を途中に持ってきたら動作しなかった。 //elementとして取りうるtextarea要素にはtype属性がなくてnullになり、結果として //論理和がnullでうまくいかないのかも。 //IEはlocalNameプロパティをサポートしない模様 //代わりにtagNameプロパティを用いるが、これはGecko系には実装されていない模様 if (element.localName == undefined ){ localName = element.tagName.toLowerCase(); }else{ localName = element.localName.toLowerCase(); } if(localName == "textarea" || localName == "select" || element.getAttribute("type").toLowerCase() == "text" || element.getAttribute("type").toLowerCase() == "password" ){ value = element.value; }else if (element.getAttribute("type").toLowerCase() == "checkbox"){ value = element.checked; } if (element == null){ result = false; return result; } element.className = element.className.replace(/\berror\b/,""); element.className = element.className.replace(/^error\b/,""); element.className = element.className.replace(/\berror$/,""); element.className = element.className.replace(/\bok\b/,""); element.className = element.className.replace(/^ok\b/,""); element.className = element.className.replace(/\bok$/,""); if( value == "" || value == null || value == undefined ){ if (missingerror != ""){ error = missingerror + "が入力されていません。"; result = false; } }else{ error = delegate(value); } if (error == null){ element.className += " ok "; result = true; } else{ element.className += " error "; if (isnormal == false){ error = missingerror; } if (error != ""){ var hoge = document.createElement("li"); hoge.appendChild(document.createTextNode(error)); stderr.appendChild(hoge); } result = false; } return result; } function donothing(){ return null; } // submit可能か判定(forms["form1"]) function Judge() { var result = false; clearstderr(); if( (Validate("name1",donothing,"お名前",true) == true) & (Validate("name2",donothing,"ふりがな",true) == true) & (Validate("eaddress",isAddress,"E-mailアドレス",true) == true) & (Validate("eaddress2",isAddress2,"確認用E-mailアドレス",true) == true) & (Validate("content",donothing,"本文",true) == true) & (Validate("Agreement",isAgree,"同意をしてくだい。",false) == true) // 今回は使わない // & (Validate("Country",donothing,"国を選択してください",false) == true) ){ var summit = document.getElementById("submit"); summit.removeAttribute("disabled"); }else{ } } //どうしてこういう動作なんだー、 //なんでこのプロパティがサポートされてないんだー、と //妙に遠回りさせられた感覚の強いコード //CSSは前回と同じ
お礼
参考にさせて頂きます。 ありがとうございました。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは こんな感じでいかがなものでしょう？ script内をもうちょっと突き詰めていけばもうちょっとスリムになるかもしれませんが・・・ 大体同じにしていますのでおそらく分かると思います とりあえずIE,Firefox、Operaでは試しています（＾＾） <style type="text/css"> li { list-style:none; color:red; } </style> <script type="text/javascript"> <!-- function able() { err = document.getElementById("error"); err.innerHTML = ""; //名前関係 name1 = document.form.name1; if(name1.value == "") { err.innerHTML += "<li>名前を入力してください</li>"; name1.style.backgroundColor = "#BBBBBB"; }else { name1.style.backgroundColor = "#FFFFFF"; } //ふりがな関係 name2 = document.form.name2; if(name2.value == "") { err.innerHTML += "<li>ふり仮名を入力してください</li>"; name2.style.backgroundColor = "#BBBBBB"; }else { name2.style.backgroundColor = "#FFFFFF"; } //e-Mail関係 ead1 = document.form.eaddress1; ead2 = document.form.eaddress2; if(ead1.value == "" || ead2.value == "") { err.innerHTML += "<li>e-Mailアドレスを入力してください</li>"; if(ead1.value == "") { ead1.style.backgroundColor = "#BBBBBB"; } else { ead1.style.backgroundColor = "FFFFFF"; mailcheck(); } if(ead2.value == "") { ead2.style.backgroundColor = "#BBBBBB"; } else { ead2.style.backgroundColor = "#FFFFFF"; mailcheck(); } }else { if(ead1.value != ead2.value) { err.innerHTML += "<li>e-Mailアドレスをもう一度ご確認ください</li>"; ead1.style.backgroundColor = "#BBBBBB"; ead2.style.backgroundColor = "#BBBBBB"; }else { ead1.style.backgroundColor = "#FFFFFF"; ead2.style.backgroundColor = "#FFFFFF"; } mailcheck(); } //本文関係 cont = document.form.content; if(cont.value == "") { err.innerHTML += "<li>お問い合わせ内容を入力してください</li>"; cont.style.backgroundColor = "#BBBBBB"; } else { cont.style.backgroundColor = "#FFFFFF"; } //submit関係 if(err.innerHTML == "") { document.form.submit(); } else { return false; } } //Mailチェック function mailcheck() { ml = /.+@/; if(!ead1.value.match(ml) && ead1.value != "") { err.innerHTML += "<li>e-Mailアドレス１が不正です</li>"; ead1.style.backgroundColor = "#BBBBBB"; } if(!ead2.value.match(ml) && ead2.value != "") { err.innerHTML += "<li>e-Mailアドレス２が不正です</li>"; ead2.style.backgroundColor = "#BBBBBB"; } } --> </script> </head> <body> <form name="form" action="mail-send.php" method="post"> <div id="error"></div> <div> <table cellspacing="0" cellpadding="0"> <tr> <td>お名前</td> <td><input type="text" name="name1" size="30" maxlength="100" /></td> </tr> <tr> <td>ふりがな</td> <td><input type="text" name="name2" size="30" maxlength="100" /></td> </tr> <tr> <td>E-mail</td> <td><input type="text" name="eaddress1" size="30" maxlength="100" /></td> </tr> <tr> <td></td> <td><input type="text" name="eaddress2" size="30" maxlength="100" /></td> </tr> <tr><td>本文</td> <td><textarea name="content" rows="6" /></textarea></td> </tr> </table> </div> <input type="button" value="送信" onClick="able()"> </form>
補足
leap_dayさんご回答ありがとうございます。 返答が遅くなり申し訳ありませんでした。 欲しかったものに近くとても助かります。 私の質問が悪かったのですが、これに同意する・しないのラジオボタンを追加して、同意するにチェックを入れた場合にのみ送信ボタンがアクティブになるようにするにはどうしたらいいでしょうか？ ： <tr><td>本文</td> <td><textarea name="content" rows="6" /></textarea></td> </tr> </table> </div> <div> <ul> <li><input name="agree" type="radio" value="同意する" onClick="check()">同意する</li> <li><input name="agree" type="radio" value="同意しない" onClick="check()" checked>同意しない</li> </ul> </div> <input type="button" value="送信" onClick="able()"> </form> ： 宜しくお願い致します。
- himajin100000
- ベストアンサー率54% (1660/3060)
>アップロードすると動かなくなった。 俺が馬鹿だっただけです。 セキュリティ インターネット 中高 信頼済みサイト(アップロード先ドメイン含む) 高 道理でうごかないわけだ。 #2の修正で動作しないようなら、補足くれ。
補足
返答が遅くなり申し訳ありません。 himajin100000様のスクリプトで動作致しました。 ありがとうございます。 私の質問の仕方が悪かったです。 E-mail入力欄を二つ、同意する・しないのラジオボタンがあると助かります。以下のHTMLで、二つのアドレスが異なる場合エラー表示、同意するにチェックを入れると送信ボタンがアクティブになるにはどうしたらいいでしょうか？ 度々宜しくお願い致します。 <body onload="init();"> <div id="err"></div> <form id="form1" action="mail-send.php" method="post"> <div> <p>全ての欄は入力必須です。</p> <table summary="入力欄"> <caption>入力欄</caption> <tr> <th>お名前</th> <td><input type="text" id="name1" size="30" maxlength="100" value="" /></td> </tr> <tr> <th>ふりがな</th> <td><input type="text" id="name2" size="30" maxlength="100" value="" /></td> </tr> <tr> <th>E-mail</th> <td><input type="text" id="eaddress1" size="30" maxlength="100" value="" /></td> </tr> <tr> <th>E-mail（確認）</th> <td><input type="text" id="eaddress2" size="30" maxlength="100" value="" /></td> </tr> <tr> <th>本文</th> <td><textarea id="content" rows="6" cols="30"></textarea></td> </tr> </table> </div> <div> <ul> <li><input name="agree" type="radio" value="同意する" onClick="check()">同意する</li> <li><input name="agree" type="radio" value="同意しない" onClick="check()" checked>同意しない</li> </ul> </div> <ul> <!--<li><input type="button" value="チェック" onclick="Judge();" /></li>--> <li><input type="submit" value="送信" id="submit" /></li> </ul> </form> </body> </html>
- himajin100000
- ベストアンサー率54% (1660/3060)
ちょっと考えさせてほしい。アップロードすると動かなくなった。
- himajin100000
- ベストアンサー率54% (1660/3060)
stderr = document.createElementNS("http://www.w3.org/1999/xhtml","ul") を stderr = document.createElement("ul"); var hoge = document.createElementNS("http://www.w3.org/1999/xhtml","li") を var hoge = document.createElement("li"); にするとどうなる？
- himajin100000
- ベストアンサー率54% (1660/3060)
================Q3205193-1.html============= <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link rel="stylesheet" href="Q3205193-1.css" /> <script type="text/javascript" src="Q3205193-1.js"></script> <title>Q3205193 テストケース1</title> </head> <body onload="init();"> <p>原型がなくなった。</p> <div id="err"></div> <form id="form1" action="mail-send.php" method="post"> <div> <p>全ての欄は入力必須です。</p> <table summary="入力欄"> <caption>入力欄</caption> <tr> <th>お名前</th> <td><input type="text" id="name1" size="30" maxlength="100" value="" /></td> </tr> <tr> <th>ふりがな</th> <td><input type="text" id="name2" size="30" maxlength="100" value="" /></td> </tr> <tr> <th>E-mail</th> <td><input type="text" id="eaddress" size="30" maxlength="100" value="" /></td> </tr> <tr> <th>本文</th> <td><textarea id="content" rows="6" cols="30"></textarea></td> </tr> </table> </div> <ul> <li><input type="button" value="チェック" onclick="Judge();" /></li> <li><input type="submit" value="送信" id="submit" /></li> </ul> </form> </body> </html> =================Q3205193-1.css======================== @charset "UTF-8"; table{ border-collapse:collapse; border-style:solid; } th,td{ padding:0; border-spacing:0; border-style:solid; } .error{ background-color:red; } .ok{ background-color:green; } =================Q3205193======================= var stderr; function init(){ document.getElementById("submit").setAttribute("disabled","disabled"); stderr = document.createElementNS("http://www.w3.org/1999/xhtml","ul") document.getElementById("err").appendChild(stderr); } function clearstderr(){ while(stderr.hasChildNodes()){ stderr.removeChild(stderr.firstChild); } } // メールアドレスチェック function isAddress(address) { if(address.indexOf("@",0)<=0) { return "メールアドレスが正しくありません。"; } else { return null; } } function Validate(name,delegate,missingerror){ /* delegateにみたいにした方が後々検証の追加が楽かな、と。 */ var element = document.forms["form1"].elements[name]; /* 呼び出し方はこう！ */ var result; var error; if (element == null){ result = false; return result; } element.className = element.className.replace(/\berror\b/,""); element.className = element.className.replace(/^error\b/,""); element.className = element.className.replace(/\berror$/,""); element.className = element.className.replace(/\bok\b/,""); element.className = element.className.replace(/^ok\b/,""); element.className = element.className.replace(/\bok$/,""); if(element.value == "" || element.value == undefined || element.value == null ){ error = missingerror + "が入力されていません。"; result = false; }else{ error = delegate(element.value); } if (error == null){ element.className += " ok "; result = true; } else{ element.className += " error "; var hoge = document.createElementNS("http://www.w3.org/1999/xhtml","li") hoge.appendChild(document.createTextNode(error)); stderr.appendChild(hoge); result = false; } return result; } function donothing(){ return null; } // submit可能か判定(forms["form1"]) function Judge() { var result = false; clearstderr(); if( (Validate("name1",donothing,"お名前") == true) & (Validate("name2",donothing,"ふりがな") == true) & (Validate("eaddress",isAddress,"E-mail") == true) & (Validate("content",donothing,"本文") == true) ){ var summit = document.getElementById("submit"); summit.removeAttribute("disabled"); }else{ } }
お礼
ありがとうございます。 試してみたのですが動きません。 何が悪いのでしょうか？
お礼
私が欲しかったものにとても近いです。 参考にさせて頂きます。 ありがとうございました。