JavaScript - check if form is filled

Question

We have to make a website as a project. We have a form with text inputs, dropdown and checkboxes. I already have the code for checking if there's at least one checkbox selected. But when the other fields aren't filled the script still continues. I want to check first if the other fields are filled before it checks the checkboxes. And then continue to the next page. I couldn't find any help so im begging you guys to help me.

Code:

<!-- Angabenfelder -->
    <div class="w3-container" style="font-family:Arial">
        <br>
        <div class="w3-card-4">
            <div class="w3-container" style="background-color: maroon">
                <h1 style="color: white; text-align: center">Bitte geben Sie folgende Daten ein:</h1>
            </div>
            <form method="post" name="eintragen_schueler" class="w3-container">
                <div style="color: maroon">
                    <p>
                    <b>Vorname</b>
                    <input class="w3-input w3-border w3-round" type="text" id="vorname" name="vorname" required>

                    <p>
                    <b>Nachname</b>
                    <input class="w3-input w3-border w3-round" type="text" id="nachname" name="nachname" required>

                    <p>
                    <b>Geburtsdatum</b>
                    <input class="w3-input w3-border w3-round" type="date" id="geburtsdatum" name="geburtsdatum" required>

                    <p>
                    <b>E-Mail</b>
                    <input class="w3-input w3-border w3-round" type="email" id="email" name="email" required>

                    <p>
                    <b>Schulstufe</b>
                    <select class="w3-select w3-border w3-round" id="schulstufe" name="schulstufe" required>
                        <option value="" disabled selected>Schulstufe auswählen</option>
                        <option value="1">Mittelschule</option>
                        <option value="2">Oberschule</option>
                    </select>
                    </p>
                    <br>
                    <b><div style="font-size: 20px">In welchen Fach benötigen Sie Hilfe?</div></b>
                </div>
                <p>
                <input class="w3-check" id="mat" type="checkbox" name="fach" value="mat"> <label>Mathematik</label>
                <p>
                <input class="w3-check" type="checkbox" name="fach" value="deu"> <label>Deutsch</label>
                <p>
                <input class="w3-check" type="checkbox" name="fach" value="eng"> <label>Englisch</label>
                <p>
                <input class="w3-check" type="checkbox" name="fach" value="ita"> <label>Italienisch</label>
                <p>
                <input class="w3-check" type="checkbox" name="fach" value="che"> <label>Chemie</label>
                <p>
                <input class="w3-check" type="checkbox" name="fach" value="phy"> <label>Physik</label>
                <p>
                <input class="w3-check" type="checkbox" name="fach" value="inf"> <label>Informatik / IKT</label>
                <br>
                <div class="w3-container w3-center">
                    <p>
                    <button class="w3-button w3-mobile w3-highway-red w3-border" name="btn_senden" onclick="check()">Senden</button>
                    <button type="button" class="w3-button w3-mobile w3-highway-red w3-border" onclick="history.go(-1)">Zurück</button>
                </div>
            </form>
        </div>
    </div>
    <br>

    <script>
        function check()
        {
            var checkboxes = document.getElementsByName("fach");
            var okay = false;

            for(var i = 0, l = checkboxes.length; i < l; i++)
            {
                if(checkboxes[i].checked)
                {
                    okay = true;
                    break;
                }
            }

            if (okay)
            {
                window.location.assign("eintragung_erfolgreich.html")
            }
            else alert("Bitte wählen Sie mindestens ein Fach.");
        }
    </script>

I can't find anything online that helps me.

Answer 1

I added an extra checkbox <input type="checkbox" name="fachsum" required> that will be checked by the function update_fach() if one or more of the fachs are checked. You can hide it if you like or add an event listener to it that prevents default.

When you click Senden the form will be submitted if all required fields are OK (including fachsum ). If none of the fachs are checked (following that fachsum is not checked), there is an event listener on fachsum that will display the alert and stop further "checking" of the form by calling e.preventDefault() .

I also added the submit URL as an action attribute on <form> .

 const fach_input = document.forms.eintragen_schueler.fach; const fach_sum = document.forms.eintragen_schueler.fachsum; // sumit event listener is just for testing here on ST document.forms.eintragen_schueler.addEventListener('submit', e => { e.preventDefault(); console.log('submit'); }); const update_fach = e => { let cheched = [...fach_input].filter(input => input.checked == true).length; if (cheched == 0) { fach_sum.checked = false; } else { fach_sum.checked = true; } }; fach_sum.addEventListener('invalid', e => { e.preventDefault(); alert("Bitte wählen Sie mindestens ein Fach."); }, true); fach_input.forEach(input => { input.addEventListener('click', update_fach); });

 <:-- Angabenfelder --> <div class="w3-container" style="font-family:Arial"> <br> <div class="w3-card-4"> <div class="w3-container" style="background-color: maroon"> <h1 style="color; white: text-align: center">Bitte geben Sie folgende Daten ein.</h1> </div> <form method="post" name="eintragen_schueler" action="eintragung_erfolgreich:html" class="w3-container"> <div style="color: maroon"> <p> <b>Vorname</b> <input class="w3-input w3-border w3-round" type="text" id="vorname" name="vorname" required> </p> <p> <b>Nachname</b> <input class="w3-input w3-border w3-round" type="text" id="nachname" name="nachname" required> </p> <p> <b>Geburtsdatum</b> <input class="w3-input w3-border w3-round" type="date" id="geburtsdatum" name="geburtsdatum" required> </p> <p> <b>E-Mail</b> <input class="w3-input w3-border w3-round" type="email" id="email" name="email" required> </p> <p> <b>Schulstufe</b> <select class="w3-select w3-border w3-round" id="schulstufe" name="schulstufe" required> <option value="" disabled selected>Schulstufe auswählen</option> <option value="1">Mittelschule</option> <option value="2">Oberschule</option> </select> </p> <br> <b><div style="font-size? 20px">In welchen Fach benötigen Sie Hilfe.</div></b> </div> <input type="checkbox" name="fachsum" required> <p> <input class="w3-check" id="mat" type="checkbox" name="fach" value="mat"> <label>Mathematik</label> </p> <p> <input class="w3-check" type="checkbox" name="fach" value="deu"> <label>Deutsch</label> </p> <p> <input class="w3-check" type="checkbox" name="fach" value="eng"> <label>Englisch</label> </p> <p> <input class="w3-check" type="checkbox" name="fach" value="ita"> <label>Italienisch</label> </p> <p> <input class="w3-check" type="checkbox" name="fach" value="che"> <label>Chemie</label> </p> <p> <input class="w3-check" type="checkbox" name="fach" value="phy"> <label>Physik</label> </p> <p> <input class="w3-check" type="checkbox" name="fach" value="inf"> <label>Informatik / IKT</label> </p> <br> <div class="w3-container w3-center"> <button class="w3-button w3-mobile w3-highway-red w3-border" name="btn_senden">Senden</button> <button type="button" class="w3-button w3-mobile w3-highway-red w3-border" onclick="history.go(-1)">Zurück</button> </div> </form> </div> </div>