在提交表单之前，我无法检查复选框组

Question

I need to validate several checkboxGroups on a form before submiting and I can't do it.

here is my code:

<div class="form-wrapper">
                <form class="form1" action="update-2.php" id="profile" onClick="validate()" method="post">
                    <fieldset class="preguntas">

\ - here I created 7 checkbox groups with different id, I will post one as an exampte- \

<p>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Rimel" id="maquillaje">
                                Rimel</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Sombra" id="maquillaje">
                                Sombra</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Delineador" id="maquillaje">
                                Delineador</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Cuidado para sombracelhas" id="maquillaje">
                                Cuidado para sombracelhas</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Batom" id="maquillaje">
                                Batom</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Batom liquido" id="maquillaje">
                                Batom liquido</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Gloss" id="maquillaje">
                                Gloss</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Batom que aumenta labios" id="maquillaje">
                                Batom que aumenta làbios</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Delineador de labios" id="maquillaje">
                                Delineador de làbios</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Primer" id="maquillaje">
                                Primer</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Corretivo" id="maquillaje">
                                Corretivo</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Base hidratante" id="maquillaje">
                                Base hidratante</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Po corretivo" id="maquillaje">
                                Pó corretivo</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Blush" id="maquillaje">
                                Blush</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Iluminador" id="maquillaje">
                                Iluminador</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Bronzer e contorno" id="maquillaje">
                                Bronzer e contorno</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Pincéis e outros aplicadores de maquiagem" id="maquillaje">
                                Pincéis e outros aplicadores de maquiagem</label>
                              <br>

                          </p>

 <p>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Rimel" id="maquillaje">
                                Rimel</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Sombra" id="maquillaje">
                                Sombra</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Delineador" id="maquillaje">
                                Delineador</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Cuidado para sombracelhas" id="maquillaje">
                                Cuidado para sombracelhas</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Batom" id="maquillaje">
                                Batom</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Batom liquido" id="maquillaje">
                                Batom liquido</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Gloss" id="maquillaje">
                                Gloss</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Batom que aumenta labios" id="maquillaje">
                                Batom que aumenta làbios</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Delineador de labios" id="maquillaje">
                                Delineador de làbios</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Primer" id="maquillaje">
                                Primer</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Corretivo" id="maquillaje">
                                Corretivo</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Base hidratante" id="maquillaje">
                                Base hidratante</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Po corretivo" id="maquillaje">
                                Pó corretivo</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Blush" id="maquillaje">
                                Blush</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Iluminador" id="maquillaje">
                                Iluminador</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Bronzer e contorno" id="maquillaje">
                                Bronzer e contorno</label>
                              <br>
                              <label>
                                <input type="checkbox" name="maquillaje[]" class="option" value="Pincéis e outros aplicadores de maquiagem" id="maquillaje">
                                Pincéis e outros aplicadores de maquiagem</label>
                              <br>

                          </p>

I tried to validate it with a php error handler stating

if(empty($_POST['maquillaje'])){
header("location: wahtever.php?check");
}else{ .... all the code to write on the database...}

but it will refresh the page nomatter what,

I also tried to use javascript to validate it

<script>
    document.getElementById("profile").onsubmit = function () {
    var send = document.getElementById("maquillaje"),
        sendValue = send.value,
        sendCheck = send.checked,
        errors = "";
    if (!sendCheck) {
        errors += "Please answer question 5";
    }
if (errors != "") {
        alert(errors);
        return false;
}
        alert("Your details are being sent"); 
    return true; 
}

</script>

but I had the same result, it won't validate the checkbox, instead will refresh the page even if the checkbox is checked...

also tried a Jquery but I will get the alert textbox all the time and it will never submit the form

I'm a rookie here and probably I making a stupid mistake PLEASE HELP!!!!

Answer 1

The jQuery method would likely be your easiest solution.

The main thing you need to add is a "preventDefault" function. This will stop the form from submitting to the backend. Then you can check for blank fields. If there were no errors, submit the form by adding this.submit()

<script>
$("#profile").submit(function(e) { // add 'e'
    e.preventDefault(); //add this line
    var send = document.getElementById("maquillaje"),
        sendValue = send.value,
        sendCheck = send.checked,
        errors = "";
    if (!sendCheck) {
        errors += "Please answer question 5";
    }
    if (errors != "") {
        alert(errors);
        return false;
    } else {
        alert("Your details are being sent"); 
        this.submit();  //submit the form  
        return true; 
    }
});
</script>

In the Docs: https://api.jquery.com/event.preventdefault/