堆栈内存溢出
  繁体   English   中英

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

[英]Onsubmit form validation function not working in IE

 原文  2009-04-26 13:22:31  6   3    javascript/ html/ javascript-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>

3 个解决方案

解决方案1
 5 已采纳  2009-04-26 13:50:49

问题（有点）是由您在此处创建的全局变量“ 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 /

解决方案2
 4  2009-04-26 13:54:18

乍一看，问题似乎在@ 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;

解决方案3
 1  2009-04-26 14:00:04

Microsoft Visual Studio可能是IE的最佳调试器，但是它非常昂贵，因此我不建议您仅为调试器购买它。 it can also debug JavaScript in IE. 但是您可能想尝试使用Visual Studio Express －我它也可以在IE中调试JavaScript。

否则，请尝试使用Microsoft脚本编辑器 。 它随Office XP和Office 2003一起提供，并且该链接包含逐步的安装说明。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 表单onSubmit验证无效 "<form onsubmit="function();">不管用" 表单上的 onsubmit = "function( )" 不起作用 表单验证无法使用onsubmit进行 JavaScript 表单验证在提交时不起作用 表单在提交时不进入验证功能 提交表单标签中的验证功能 HTML Form Onsubmit验证不适用于JS功能 在IE和Firefox中使用Javascript表单onSubmit无法正常工作 为什么我的表单验证不起作用（onsubmit不触发）？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM