javascript - alert box shows up N times after clicking N times on submit button -

given function:

function validate() {    var elements = ["firstname", "lastname", "password", "favfood", "favsport"];     document.getelementbyid('register').novalidate = true;    document.getelementbyid('register').addeventlistener('submit', function(event) {       (var = 0; < 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 form.');                break;             }          }       }    }, false); } 

and form:

<form name="register" id="register" method="post" action="this-file.php">    [html elements validate]    <input type="submit" value="register" onclick="validate()"> </form> 

when press register first time (without filling in anything), alert box shows once; if press register again, alert box shows twice , on. what's going on?

i'm using custom javascript function validate form because required attribute not work on safari.

thank in advance.

its quite straightforward, adding submit event listener each time whenever hit submit button i.e. through validate function. there 2 ways handle either register once or remove added listener first , add it.

first way

function validate() {    var elements = ["firstname", "lastname", "password", "favfood", "favsport"];     document.getelementbyid('register').novalidate = true;    document.getelementbyid('register').addeventlistener('submit', function(event) {       (var = 0; < 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 form.');                break;             }          }       }    }, false); }  validate(); // call function directly , remove submit button 

second way

function validatecallback(event) {     var elements = ["firstname", "lastname", "password", "favfood", "favsport"];      (var = 0; < 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 form.');            break;         }      }   } }  function validate() {    document.getelementbyid('register').novalidate = true;    document.getelementbyid('register').removeeventlistener('submit', validatecallback, false);    document.getelementbyid('register').addeventlistener('submit', validatecallback, false); } 

and use same using currently.