Question

我正在为一个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>

Answer 1

问题（奇怪）是由于你在这里创建一个名为“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/

Answer 2

快速浏览一下，问题似乎发生在@线上的document.getElementById（ “父”）。值

你应该在这里使用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;

Answer 3

Microsoft Visual Studio可能是IE的最佳调试器，但它非常昂贵，因此我不建议仅为调试器购买它。但你可能想尝试Visual Studio Express - 我猜测它也可以在IE中调试JavaScript。

否则，请尝试Microsoft Script Editor。它随Office XP和Office 2003一起提供，该链接具有逐步的设置说明。

提交表单验证功能在IE中不起作用

3 个答案: