Warnmeldung erscheint N mal nach N-mal einem Klick auf Submit-Button

Question

diese Funktion Gegeben:

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

Und diese Form:

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

Als ich Register das erste Mal drücken (ohne in etwas Füllung), die Alarmbox erscheint nur einmal; Wenn ich erneut Register drücke, erscheint die Alarmbox zweimal und so weiter. Was ist los?

Ich verwende eine benutzerdefinierte JavaScript-Funktion, um mein Formular zu überprüfen, da das Attribut required in Safari nicht funktioniert.

Vielen Dank im Voraus.

Answer 1

Es ist ganz einfach, fügen Sie senden Ereignis-Listener jedes Mal, wenn Sie Ihre Schaltfläche zum Senden drücken, d. H. Durch validate Funktion. Es gibt zwei Möglichkeiten, dies zu tun, entweder nur einmal zu registrieren oder den hinzugefügten Listener zuerst zu entfernen und dann hinzuzufügen.

Erste Way

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 

Second Way

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

und verwenden Sie es gleich wie Sie gerade verwenden.

Answer 2

Sie erhalten immer mehr Warnungen, da Sie in Ihrer validate-Methode jedes Mal einen neuen Ereignis-Listener zum Senden-Schalter hinzufügen.