Verwenden der erforderlichen Checkbox-Validierung, um das Senden von Formularen zu verhindern

Question

Ich habe Code, der prüft, ob mindestens ein Kontrollkästchen ausgewählt ist und dann das Formular (MailChimp) abgibt. Mein Problem ist, dass ich nicht weiß, wie man die MailChimp-Einreichung stoppt, wenn es feststellt, dass keine Checkboxen ausgewählt sind. Gerade jetzt zeigt es den Alarm an und sendet dann das Formular trotzdem ... wenig Hilfe.

<form onsubmit="valthis()" action="//mailchimp form" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 

// form html 

     <script>function valthis() { 
var checkBoxes = document.getElementsByClassName('myCheckBox'); 
var isChecked = false; 
    for (var i = 0; i < checkBoxes.length; i++) { 
     if (checkBoxes[i].checked) { 
      isChecked = true; 
     }; 
    }; 
    if (isChecked) { 
     alert('At least one checkbox is NOT checked!'); 
     } 
}</script> 

<input type="submit" value="Subscribe to notifications" name="subscribe" id="mc-embedded-subscribe" class="button"> 

Answer 1

Sie können return den Wert Ihrer JS-Funktion tun, wenn der Datenverarbeitung:

<form onsubmit="return valthis()" action="//mailchimp form" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 

<script> 
function valthis() { 
    var checkBoxes = document.getElementsByClassName('myCheckBox'); 
    var isChecked = false; 

    for (var i = 0; i < checkBoxes.length; i++) { 
     if (checkBoxes[i].checked) { 
      isChecked = true; 
      break; //don't need to continue the loop once a checkbox was found 
     } 
    } 

    if (!isChecked) { 
     alert('At least one checkbox is NOT checked!'); 
     return false; 
    } 

    return true; 
} 
</script> 

<input type="submit" value="Subscribe to notifications" name="subscribe" id="mc-embedded-subscribe" class="button"> 

Answer 2

Sie müssen sich auf ein Ereignis in das Formular hinzuzufügen

document.getElementsByName("subscribe").onsubmit(function(event) { 
    if(!isChecked) { //If not checked 
     event.preventDefault(); // stops the form submitting 
    } 
}); 

einreichen Wenn kein Kontrollkästchen ist sind überprüft preventDefault. Dies stoppt das Senden des Formulars