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

我正在为html表单开发一个简单的javascript验证函数，但已经遇到了使用IE7的问题。我没有得到任何错误消息，表单只是提交没有验证。 Firefox和Opera工作正常，所以我真的不知道我在这里做错了什么。我周围搜索，但没有发现任何有用的东西，或者不会搜索正确的关键字。Onsubmit表单验证功能在IE中不起作用

*此外，如果任何人都可以推荐一个很好的工具用于在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>

来源

2009-04-26 Lea

问题（奇怪）由具有一个名为“父”的全局变量，你在这里创造引起：

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-26 13:50:49 RichieHindle

好的......修复了这些问题。非常感谢你的建议。我是js的新手，所以任何提示都非常有用。此外，我使用萤火虫ff ...它的一个伟大的工具...我只是想知道有关类似的东西...所以感谢链接。再次欢呼！ – Lea 2009-04-26 13:58:27

你应该看看Firebug Lite：http://getfirebug.com/lite.html它为Internet Explorer添加了一些Firebug的功能（但据我所知，可惜不是调试器）。 – RichieHindle 2009-04-26 14:07:39

您应该通过像jshint.com这样的linter运行您的代码，以在编写Javascript时获得良好实践的想法 – Martin 2013-07-02 19:57:55

快速浏览问题似乎发生@行的document.getElementById（“母公司”）值

你真的应该使用。 var parent在这里显式声明它为局部变量。

无论如何，你很多的他们，可能是理智代码进行核对和重构+你有没有异常处理在所有...

此块重复8次...各VAR ...

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（ “”）。值你真的应该在这里做一个检查到m确保getElementById不返回null。

var name = ""; 
var nametemp = document.getElementById("name"); 
if (nametemp != null) 
    name = nametemp.value;

来源

2009-04-26 13:54:18

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

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

来源

2009-04-26 14:00:04 Calvin

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

回答

相关问题