окно предупреждения показывает вверх N раз после нажатия N раз на кнопку

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

Его довольно простой, вы добавляете submit прослушиватель событий каждый раз, когда ваша кнопка отправки нажата i.e через 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 

Второй путь

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

    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; 
     } 
    } 
    } 
} 

function validate() { 
    document.getElementById('register').noValidate = true; 
    document.getElementById('register').removeEventListener('submit', validateCallback, false); 
    document.getElementById('register').addEventListener('submit', validateCallback, false); 
} 

и использовать его так же, как вы используете в данный момент.

Answer 2

Вы получаете все больше предупреждений, потому что внутри вашего метода validate вы каждый раз добавляете нового слушателя событий к кнопке отправки.