0

htmlフォームの単純なjavascript検証関数に取り組んでいますが、IE7を使用すると問題が発生します。エラーメッセージが表示されません。フォームは検証せずに送信するだけです。FirefoxとOperaは正常に動作するので、ここで何が間違っているのかよくわかりません。私はグーグルで検索しましたが、役立つものが見つからなかったか、適切なキーワードをグーグルで検索していない可能性があります。

*また、IEでjavascriptをデバッグするために使用する優れたツールを誰かが推奨できる場合。

どんな助けでもありがたいです。

<html>
<head>
  <title>Hello!</title>
<style type="text/css">    
  .error {
  font-family: Tahoma;
font-size: 8pt;
  color: red;
  margin-left: 50px;
  display:none;
  }    
</style>
<script type="text/javascript">    
  function checkForm() {
  age = document.getElementById("age").value;
  name = document.getElementById("name").value;
  comment = document.getElementById("comment").value;
  parent = document.getElementById("parent").value;
  phone = document.getElementById("phone").value;
  sig = document.getElementById("sig").value;
  player = document.getElementById("player").value;
  iagree = document.getElementById("iagree").value;

  if (age == "") {
  hideAllErrors();
document.getElementById("ageError").style.display = "inline";
document.getElementById("age").select();
document.getElementById("age").focus();
  return (false);
  } else if (name == "") {
  hideAllErrors();
document.getElementById("nameError").style.display = "inline";
document.getElementById("name").select();
document.getElementById("name").focus();
  return (false);
  } else if (comment == "") {
hideAllErrors();
document.getElementById("commentError").style.display = "inline";
document.getElementById("comment").select();
document.getElementById("comment").focus();
  return (false);
  } else if (parent == "") {
hideAllErrors();
document.getElementById("parentError").style.display = "inline";
document.getElementById("parent").select();
document.getElementById("parent").focus();
  return (false);
  } else if (phone == "") {
hideAllErrors();
document.getElementById("phoneError").style.display = "inline";
document.getElementById("phone").select();
document.getElementById("phone").focus();
  return (false);
  } else if (sig == "") {
hideAllErrors();
document.getElementById("sigError").style.display = "inline";
document.getElementById("sig").select();
document.getElementById("sig").focus();
  return (false);
  } else if (player == "") {
hideAllErrors();
document.getElementById("playerError").style.display = "inline";
document.getElementById("player").select();
document.getElementById("player").focus();
  return (false);
  } else if (iagree != "I agree") {
hideAllErrors();
document.getElementById("iagreeError").style.display = "inline";
document.getElementById("iagree").select();
document.getElementById("iagree").focus();
  return (false);
  }
  return (true);
  }

  function hideAllErrors() {
document.getElementById("ageError").style.display = "none"
document.getElementById("nameError").style.display = "none"
document.getElementById("commentError").style.display = "none"
document.getElementById("parentError").style.display = "none"
document.getElementById("phoneError").style.display = "none"
document.getElementById("sigError").style.display = "none"
document.getElementById("playerError").style.display = "none"
document.getElementById("iagreeError").style.display = "none"
  }
</script>
</head>

<body>


    <form onsubmit="return checkForm();" action="contact.php" method="post">
    <div style="background: #ffffe5; padding:5px;">
      <label for="isnew"><b>I am a new member:</b></label><input type="checkbox" id="isnew" name="isnew" value="New Member" /><br />
      (If you are re-registering for the year, please leave this box unchecked)
    </div>
    <table>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td>
          <b><label for="age">Your Age:</label></b><br />
          <input type="text" id="age" name="age" maxlength="3" style="width:40px; background: #ffffe5;" value="" />
          <div class="error" id="ageError">
            Required: Please enter your age<br />
          </div>
        </td>
        <td><b>Girl or Boy?:</b><br />
        <select name="gender" size="1">
          <option value="-1" selected="selected">
            Choose One
          </option>

          <option value="Girl">
            Girl
          </option>

          <option value="Boy">
            Boy
          </option>
        </select></td>
      </tr>
      <tr>
        <td><b><label for="name">Your Name:</label></b></td>
      </tr>
      <tr>
        <td>
          <input type="text" name="name" id="name" maxlength="40" value="" />
          <div class="error" id="nameError">
            Required: Please enter your name<br />
          </div>
        </td>
      </tr>
      <tr>
        <td><b>Home Address:</b></td>
      </tr>
      <tr>
        <td>
          <textarea name="address" id="comment">
</textarea><br />
          <div class="error" id="commentError">
            Required: Please enter your address<br />
          </div>
        </td>
      </tr>

      <tr>
        <td><b><label for="parent">Parent/Guardian Name:</label></b></td>
      </tr>
      <tr>
        <td>
          <input type="text" name="parent" id="parent" maxlength="40" value="" />

          <div class="error" id="parentError">
            Required: Please enter your parent or guardian's name<br />
          </div>
        </td>
      </tr>
      <tr>
        <td><b>Address(If different from above):</b></td>
      </tr>
      <tr>
        <td>
        <textarea name="altaddress">
</textarea></td>
      </tr>
      <tr>
        <td><b>Phone Details:</b></td>
      </tr>
      <tr>
        <td>
          <b><label for="phone">Best Contact Number:</label></b><br />
          <input type="text" id="phone" name="contactphone" maxlength="40" value="" />

          <div class="error" id="phoneError">
            Required: Please enter a phone number<br />
          </div>
        </td>
        <td><b>Mobile:</b><br />
        <input type="text" name="contactmob" maxlength="40" /></td>
      </tr>
      <tr style="background: #ffffe5;">
        <td><b>Medical Conditions:</b></td>
      </tr>
      <tr style="background: #ffffe5;">
        <td>
        <textarea name="medical">
</textarea></td>
        <td><small>(If there are any medical conditions that trainers, and the club should know about, please list them here).</small></td>
      </tr>
      <tr>
        <td><b>Player Agreement:</b></td>
      </tr>
    </table>

    <div style="border: 1px solid #e0e0e0; padding:5px;">
      (If under the age of 18 years of age, a parent or legal guardian must sign)<br />
      I, <input type="text" name="agreename" id="sig" maxlength="40" style="border:none; background:#ffffe5;" value="" />

      <div class="error" id="sigError">
        &lt;-(Required: Please enter your parent or guardian's name)
      </div>being the parent/legal guardian of <input type="text" name="playername" maxlength="40" style="border:none; background:#ffffe5;" id="player" value="" />

      <div class="error" id="playerError">
        &lt;-(Required: Please enter your child's name)
      </div>hereby give consent for the above named player to register to play Australian Football.<br />
      <br />
    </div><br />
    <br />

    <div style="background: #ffffe5; padding:5px;">
      By submitting this form, and signing in the field below, I hereby agree that I am <b>over 18yr's of age</b> and/or have all nessecary permissions to legally process this document.

      <div style="maring:0; padding: 0;">
        <div style="margin-bottom:5px;">
          <b><label for="iagree">Please type this in the field below: <input type="text" style="background: #e0e0e0; width:45px; color:#000000;" disabled="disabled" value="I agree" /></label></b><br />
          <br />
          <input type="text" name="iagree" value="" id="iagree" />

          <div class="error" id="iagreeError">
            &lt;-(Required: You must confirm this documents legality)
          </div>
        </div><br />
      </div>
    </div>

    <div>
      <input type="submit" name="submitreg" value="Join Our Club!" />
    </div>
  </form>
</body>
</html>
4

3 に答える 3

5

この問題は (奇妙なことに)、ここで作成している「親」と呼ばれるグローバル変数が原因で発生します。

parent = document.getElementById("parent").value;

JavaScript には「親」と呼ばれる独自の変数があり、それを上書きしているため、ブラウザーが混乱します。次のように、自分のものをローカル変数として宣言する必要があります。

var parent = document.getElementById("parent").value;

そしてそれはそれを機能させるでしょう。とにかく、その種の変数には常に「var」を使用することをお勧めします。使用しているすべての変数に対して使用してください。

JavaScript デバッガに関しては、FireBugを使用して FireFox でデバッグできます。Internet Explorer では、Visual Studio が優れていますが、高価です。または、次の手順に従ってVisual Web Developerを無料で使用できます: http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express /

于 2009-04-26T13:50:49.907 に答える
4

一見すると、問題は行 document.getElementById("parent").value で発生しているように見えます

ここを使用var parentして、ローカル変数として明示的に宣言する必要があります。

とにかく、サニティチェックとリファクタリングが可能なコードがたくさんあります+例外処理はまったくありません...

このブロックは、変数ごとに 8 回繰り返されます...

if (age == "") {
  hideAllErrors();
  document.getElementById("ageError").style.display = "inline";
  document.getElementById("age").select();
  document.getElementById("age").focus();
  return (false);
}

それは簡単に作ることができた

if(age == "") {
   DoMyFunction("age", "ageError");
}
...

function DoMyFunction(a, b)
{
  hideAllErrors();
  document.getElementById(b).style.display = "inline";
  document.getElementById(a).select();
  document.getElementById(a).focus();
  return (false);
}

そして、document.getElementById("").value がある場所ならどこでも、getElementById が null を返さないことを確認するために、ここで実際にチェックを行う必要があります。

var name = "";
var nametemp = document.getElementById("name");
if (nametemp != null)
   name = nametemp.value;
于 2009-04-26T13:54:18.090 に答える
1

Microsoft Visual Studio はおそらく IE に最適なデバッガーですが、非常に高価なので、デバッガーのためだけに購入することはお勧めしません。しかし、Visual Studio Expressを試してみるのもよいでしょう -- IEで JavaScript をデバッグすることもできると思います。

それ以外の場合は、 Microsoft Script Editorを試してください。Office XP および Office 2003 に付属しており、そのリンクには段階的なセットアップ手順が記載されています。

于 2009-04-26T14:00:04.970 に答える