Schaltfläche Senden nicht mit Anfrage gesendet wird, wenn über JavaScript

Question

HTML

<form method='POST' id='signup_form'> 
    <label for='email'>E-mail:</label><br /> 
    <input type='email' name='email' /><br /><br /> 
    <label for='username'>Username:</label><br /> 
    <input type='text' name='username' /><br /><br /> 
    <label for='password'>Password:</label><br /> 
    <input type='password' name='password' /><br /><br /> 
    <label for='confirmpassword'>Confirm Password:</label><br /> 
    <input type='password' name='confirmpassword' /><br /><br /> 
    <input type='submit' name='signup' /> 
</form> 

JavaScript

const signup_form = document.getElementById('signup_form'); 

signup_form.addEventListener('submit', function() { 
    event.preventDefault(); 

    let missing_input = false; 

    for (let i = 0; i < this.children.length; i++) { 
     if (this.children[i].type !== undefined && this.children[i].type !== 'submit') 
      if (this.children[i].value === '') { 
       missing_input = true; 
       break; 
      } 
    } 

    if (!missing_input) 
     this.submit(); 
}); 

einreichen

Also ich versuche, einige Validierung in meinem JavaScript zu tun, bevor ich meine Form zu PHP einreichen. Wenn der Benutzer versucht, das Formular zu senden, überprüfe ich die Eingaben, um zu sehen, ob sie leer sind und wenn einer von ihnen dann bin, übermittle ich das Formular nicht. Diese Funktionalität funktioniert einwandfrei, aber wenn das Formular übermittelt wird, wird <input type='submit' name='signup' /> nicht in _POST angezeigt. Alle anderen Eingaben tun es. Es funktionierte gut, bevor ich den Event-Listener implementierte.

Dies ist, was $_POST wie nach aussieht erfolgreich einreichen:

Array ([email] => eric@live.ca [username] => ericsartor [password] => asdasdasd [confirmpassword] => asdasdasd) 

ich etwas falsch gemacht? Es funktioniert definitiv gut, wenn ich den Ereignis-Listener entferne, aber ich verstehe nicht, warum, wenn das Verhindern der Übermittlungsschaltfläche in der Anfrage enthalten ist ...

EDIT: Ich fand die Lösung dank eines Links, den Andre gepostet hat. Ich habe meine eigene Antwort geschrieben, aber ich kann sie noch nicht akzeptieren.

Answer 1

Das Problem war, dass ich event.preventDefault() zur falschen Zeit rief. Ich habe meine JavaScript dies geändert:

const signup_form = document.getElementById('signup_form'); 

signup_form.addEventListener('submit', function() { 
    let missing_input = false; 

    for (let i = 0; i < this.children.length; i++) { 
     if (this.children[i].type !== undefined && this.children[i].type !== 'submit') 
      if (this.children[i].value === '') { 
       missing_input = true; 
       break; 
      } 
    } 

    if (missing_input) 
     event.preventDefault(); 
}); 

ich die Standard-Vorlage nur verhindern, wenn ich wirklich ein Problem finden. Zuvor verhinderte ich jedes Mal die anfängliche Einreichung und versuchte dann erneut zu senden, sobald ich alles validiert hatte. Etwas hat dazu geführt, dass die Variable nicht in die Anfrage gelangt ist. Props an Andre Rodrigues für das Posten eines Links zu einer anderen Frage, die das erwähnte!

Answer 2

Nicht sicher, ob es hilft, aber Sie müssen zumindest das Ereignis Argument für den Rückruf wie dies passieren, sonst können Sie nicht darauf zugreifen:

signup_form.addEventListener('submit', function(event) {//content}) 

Answer 3

Ich denke, die einfache Art und Weise es ist mit: onsubmit='return validaForm(this)'

so ...

<form method='POST' id='signup_form' onsubmit='return validaForm(this)'> 
    <label for='email'>E-mail:</label><br /> 
    <input type='email' name='email' /><br /><br /> 
    <label for='username'>Username:</label><br /> 
    <input type='text' name='username' /><br /><br /> 
    <label for='password'>Password:</label><br /> 
    <input type='password' name='password' /><br /><br /> 
    <label for='confirmpassword'>Confirm Password:</label><br /> 
    <input type='password' name='confirmpassword' /><br /><br /> 
    <input type='submit' name='signup' /> 
</form> 

und

<script> 

    var validaForm = function(signup_form) { 

     event.preventDefault(); 

     let missing_input = false; 

     for (let i = 0; i < signup_form.children.length; i++) { 
      if (signup_form.children[i].type !== undefined && signup_form.children[i].type !== 'submit') 
       if (signup_form.children[i].value === '') { 
        missing_input = true; 
        break; 
       } 
     } 

     if (!missing_input) { 
      signup_form.submit(); 
     } else { 
      alert('field empty'); 
     } 

    } 

    </script> 

Referenzen:

javascript: validate form before submit?

HTML/Javascript: Simple form validation on submit

get all the elements of a particular form