为什么onChange事件发生时clear（）函数不会被调用？

我正在完成Javascript表单验证练习。在我的代码中，我有一个包含三列的表格：表单名称，表单，验证消息。在表单验证过程中发生错误时，该消息出现在第三列中。当表单元素被更改时 - 错误消息应该消失，但不会。看起来clear（）函数根本没有被调用。有人可以帮助我 - 谢谢！为什么onChange事件发生时clear（）函数不会被调用？

<html> 
<head> 
<title>Validation</title> 
<script type="text/javascript"> 
    function clear() 
    { 
     for(var i in document.getElementsByName("error")) 
     { 
      document.getElementsByName("error")[i].innerHTML = ""; 
     } 
    } 


    function validate() 
    { 
     if(document.Form.Name.value.length < 1) 
     { 
      document.getElementsByName("error")[0].innerHTML = "Please enter your full name." 
      return false; 
     } 

     if(document.Form.Address.value.length<3) 
     { 
      document.getElementsByName("error")[1].innerHTML = "Please enter full address." 
      return false; 
     } 

     if(document.Form.Phone.value.length <6) 
     { 
      document.getElementsByName("error")[2].innerHTML = "Please enter a phone number." 
      return false; 
     } 

     if(document.Form.Email.value.length <5 || "@".search(document.Form.Email.value)==-1) 
     { 
      document.getElementsByName("error")[3].innerHTML = "Please enter a valid e-mail address"; 
      return false; 
     } 

    } 
</script> 
</head> 
<body> 
<h1>Validation</h1> 
<p>Enter the following information. When you press the Submit button, the data you entered will be validated.</p> 
<form name="Form" onSubmit="return validate()"> 
<table> 
<tr> 
    <td>Name</td> 
    <td><input type="text" name="Name" size="20" onchange="clear()" class="Form"></td> 
    <td><div name="error"></div></td> 
</tr> 
<tr> 
    <td>Address</td> 
    <td><textarea rows="5" columns="20" class="Form" onchange="clear()" name="Address"></textarea></td> 
    <td><div name="error"></div></td> 
</tr> 
<tr> 
    <td>Phone</td> 
    <td><input type="text" name="Phone" onchange="clear()" size="11" class="Form"></td> 
    <td><div name="error"></div></td> 
</tr> 
<tr> 
    <td>E-mail</td> 
    <td><input type="text" name="Email" onchange="clear()" size="20" class="Form"></td> 
    <td><div name="error"></div></td> 
</tr> 
</table> 
<input type="submit" value="Submit" > 
<input type="button" value="Clear" onClick="clear();"> 
</form> 
</body> 
</html>

来源

2012-05-10 W.K.S

尝试重命名明确的方法来其他的东西（例如 “clearErrors”）。似乎与内置函数有一些名称冲突。 –

试试这个

<html> 
    <head> 
<title>Validation</title> 

</head> 
<body> 
<h1>Validation</h1> 
<p>Enter the following information. When you press the Submit button, the data you entered will be validated.</p> 
<form name="Form" onSubmit="return validate()"> 
<table> 
<tr> 
    <td>Name</td> 
    <td><input type="text" name="Name" size="20" onkeypress="return clearErrors();" class="Form"></td> 
    <td><div name="error"></div></td> 
</tr> 
<tr> 
    <td>Address</td> 
    <td><textarea rows="5" columns="20" class="Form" onkeypress="return clearErrors();" name="Address"></textarea></td> 
    <td><div name="error"></div></td> 
</tr> 
<tr> 
    <td>Phone</td> 
    <td><input type="text" name="Phone" onkeypress="return clearErrors();" size="11" class="Form"></td> 
    <td><div name="error"></div></td> 
</tr> 
<tr> 
    <td>E-mail</td> 
    <td><input type="text" name="Email" onkeypress="return clearErrors();" size="20" class="Form"></td> 
    <td><div name="error"></div></td> 
</tr> 
</table> 
<input type="submit" value="Submit" > 
<input type="button" value="Clear" onClick="return clearErrors();"> 
</form> 
<script type="text/javascript"> 
    function clearErrors() 
     { 

      var arr = new Array(); 
      arr = document.getElementsByName('error'); 
      for (var i = 0; i < arr.length; i++) { 
       document.getElementsByName('error')[i].innerHTML = ""; 

      }  
     return true; 
    } 


    function validate() 
    { 
     if(document.Form.Name.value.length < 1) 
     { 
      document.getElementsByName("error")[0].innerHTML = "Please enter your full name." 
      return false; 
     } 

     if(document.Form.Address.value.length<3) 
     { 
      document.getElementsByName("error")[1].innerHTML = "Please enter full address." 
      return false; 
     } 

     if(document.Form.Phone.value.length <6) 
     { 
      document.getElementsByName("error")[2].innerHTML = "Please enter a phone number." 
      return false; 
     } 

     if(document.Form.Email.value.length <5 || "@".search(document.Form.Email.value)==-1) 
     { 
      document.getElementsByName("error")[3].innerHTML = "Please enter a valid e-mail address"; 
      return false; 
     } 

    } 
</script> 
</body> 
</html>

来源

2012-05-10 10:31:36 coolguy

名称与'clear'名称冲突 – coolguy

为什么onChange事件发生时clear（）函数不会被调用？

回答

相关问题