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”的全局变量引起的，您在此处创建它：

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

JavaScript 有自己的变量，称为“parent”，而您正在覆盖它，从而使浏览器感到困惑。您应该将您的声明为局部变量，如下所示：

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 脚本编辑器。它与 Office XP 和 Office 2003 一起提供，并且该链接具有分步设置说明。

于 2009-04-26T14:00:04.970 回答