JavaScript - 检查表格是否填写

Question

我们必须将网站作为一个项目来制作。 我们有一个带有文本输入、下拉列表和复选框的表单。 我已经有了检查是否至少选中了一个复选框的代码。 但是，当其他字段未填写时，脚本仍会继续。 我想先检查其他字段是否已填写，然后再检查复选框。 然后继续下一页。 我找不到任何帮助，所以我恳求你们帮助我。

代码：

<!-- 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>

我在网上找不到任何对我有帮助的东西。

Answer 1

我添加了一个额外的复选框<input type="checkbox" name="fachsum" required>如果选中了一个或多个 fach，它将由 function update_fach()检查。 您可以根据需要隐藏它，或者向它添加一个事件侦听器以防止默认。

当您单击Senden时，如果所有必填字段都正确（包括fachsum ），将提交表单。 如果没有检查任何 fach（在未检查fachsum之后），则fachsum上有一个事件侦听器，它将显示警报并通过调用e.preventDefault()停止进一步“检查”表单。

我还在<form>上添加了 submit URL 作为 action 属性。

 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>