Question

鉴于此功能：

function validate() {
   var elements = ["firstname", "lastname", "password", "favfood", "favsport"];

   document.getElementById('register').noValidate = true;
   document.getElementById('register').addEventListener('submit', function(event) {
      for (var i = 0; i < elements.length; i++) {
         if(document.getElementById(elements[i]).hasAttribute("required")) {
            if(!document.getElementById(elements[i]).checkValidity()) {
               event.preventDefault();
               alert('Please, fill in every required field of the form.');
               break;
            }
         }
      }
   }, false);
}

这种形式：

<form name="register" id="register" method="POST" action="this-file.php">
   [HTML ELEMENTS TO VALIDATE]
   <input type="submit" value="Register" onclick="validate()">
</form>

当我第一次按Register时（没有填写任何内容），警报框只显示一次;如果我再次按Register，警告框会显示两次，依此类推。发生了什么事？

我正在使用自定义JavaScript函数来验证我的表单，因为required属性在Safari上不起作用。

提前谢谢大家。

Answer 1

您收到的警报越来越多，因为在validate方法中，您每次都会向提交按钮添加一个新的事件监听器。

Answer 2

非常简单，只要您点击提交按钮（即通过<div class="logo"></div> <ul class="bar"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Skills</a></li> <li><a href="#">Contacts</a></li> </ul>功能），您每次都会添加提交事件监听器。处理此方法有两种方法：只注册一次或首先删除添加的侦听器而不是添加它。

第一种方式

validate

第二种方式

function validate() {
   var elements = ["firstname", "lastname", "password", "favfood", "favsport"];

   document.getElementById('register').noValidate = true;
   document.getElementById('register').addEventListener('submit', function(event) {
      for (var i = 0; i < elements.length; i++) {
         if(document.getElementById(elements[i]).hasAttribute("required")) {
            if(!document.getElementById(elements[i]).checkValidity()) {
               event.preventDefault();
               alert('Please, fill in every required field of the form.');
               break;
            }
         }
      }
   }, false);
}

validate(); // call this function directly and remove it from your submit button

并使用它与您当前使用的相同。

在提交按钮上单击N次后，警告框显示N次

2 个答案: