爲什麼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（）函數不會被調用？

回答

相關問題