メールフォームエラー表示について

Question

お世話になります。以下のフォーム内容エラー表示のスクリプトはWinIEでは動作するのですが、Firefox、Safariでは動作しません。なぜでしょうか？ご教授下さい。又、メールアドレスを２つ入力個所を設け、その二つが異なる場合エラーを出したいのですが、どうしたらいいでしょうか？そして、あるチェックボックスにチェックを入れて場合のみ送信ボタンが押すことができるようにするにはどうしたらいいでしょうか？度重なる質問で申し訳ありません。何卒宜しくお願い致します。

leap_day · Accepted Answer

こんにちは色々な意見が出ているようで困惑されるかもしれませんが・・・補足が入っているようなのでそちらを答えさせてもらいます【

はエラー表示でも使用しているので（そのままだと赤字になるので）スタイルシートに以下を追加してください】 ul li { color:black; } 【javascript内に以下を追加】 function check(n) { if(n == "同意する") { document.getElementById("send").disabled = false; }else { document.getElementById("send").disabled = true; } } 【ラジオボタンのところと送信ボタンを以下に変更】

同意する
同意しない

Chaire · Answer

<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 · Answer

Q3205193 テストケース1

原型がなくなった。

全ての欄は入力必須です。

入力欄
お名前
ふりがな
E-mail
E-mail(確認用)
本文
『質問者がhimajin100000に絶対服従すること』に同意しますか？	同意する

=======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 · Answer

こんにちはこんな感じでいかがなものでしょう？ script内をもうちょっと突き詰めていけばもうちょっとスリムになるかもしれませんが・・・大体同じにしていますのでおそらく分かると思いますとりあえずIE,Firefox、Operaでは試しています（＾＾）

himajin100000 · Answer

>アップロードすると動かなくなった。
俺が馬鹿だっただけです。

セキュリティ
インターネット　中高
信頼済みサイト(アップロード先ドメイン含む)　高

道理でうごかないわけだ。

#2の修正で動作しないようなら、補足くれ。

himajin100000 · Answer

ちょっと考えさせてほしい。アップロードすると動かなくなった。

himajin100000 · Answer

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 · Answer

================Q3205193-1.html============= Q3205193 テストケース1

原型がなくなった。

=================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{ } }

メールフォームエラー表示について

こんにちは

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

こんにちは

この回答への補足

>アップロードすると動かなくなった。

この回答への補足

ちょっと考えさせてほしい。

stderr = document.createElementNS("

================Q3205193-1.html=============

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング