javascript - Onsubmit 表单验证功能在 IE 中不起作用

标签 javascript html dom-events

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

最佳答案

问题(奇怪的是)是由您在此处创建的名为“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/

关于javascript - Onsubmit 表单验证功能在 IE 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/790846/

上一篇：php - 如何调用js而不显示代码

下一篇：javascript - 为什么下面的 jquery 脚本不起作用？

相关文章：

javascript - 将 json 传递给 php 并从 php 接收数据的问题

javascript - 如何在 2 个字符之间进行字符串替换和交换以替换为

php - 创建此类网站/应用程序时应该使用哪种 PHP 框架？

html - 带有 ms-filter 的 CSS 属性背景大小在 IE8 中不起作用

javascript - 如何仅使用 Javascript 取消绑定(bind)添加到窗口的滚动事件？

javascript - 如何使 Div 的高度变化变慢

javascript - 如何使用 Aframe js 创建平行四边形？

python - 使用 html5lib 将 HTML 片段转换为纯文本

javascript - Chrome扩展禁用js触发器

javascript - 缓慢的 jquery 性能

©2024 IT工具网  联系我们