如何在JavaScript/HTML中一次性显示所有输入错误——电影票购买表单多错误提示问题解决

嘿，我看到你遇到的问题了——现在你的表单验证只会在第一个空字段处停下来，没法一次性显示所有未填项的错误提示对吧？这是因为每个if判断里的return false会直接终止函数，后面的验证逻辑根本没机会执行。咱们来调整代码，让它能一次性把所有错误都展示给用户：

修改后的JavaScript代码（核心是重写kjopBillett函数） #

let billett = [];

function kjopBillett() {
    // 1. 先清空所有错误提示，避免残留之前的错误信息
    document.getElementById("filmFeil").innerHTML = "";
    document.getElementById("antallFeil").innerHTML = "";
    document.getElementById("fornavnFeil").innerHTML = "";
    document.getElementById("etternavnFeil").innerHTML = "";
    document.getElementById("telefonnrFeil").innerHTML = "";
    document.getElementById("epostFeil").innerHTML = "";

    let lagBillett ={
        film : document.getElementById("film").value,
        antall : document.getElementById("antall").value,
        fornavn : document.getElementById("fornavn").value,
        etternavn : document.getElementById("etternavn").value,
        telefonnr : document.getElementById("telefonnr").value,
        epost : document.getElementById("epost").value
    };

    let isValid = true; // 标记验证是否通过

    // 2. 逐个检查字段，发现错误就设置提示，不直接终止函数
    if(lagBillett.film === "") {
        document.getElementById("filmFeil").innerHTML = "<span style='color: red'>Du må velge en film.</span>";
        isValid = false;
    }
    if(lagBillett.antall === "") {
        document.getElementById("antallFeil").innerHTML = "<span style='color: red'>Du må velge antall billeter.</span>";
        isValid = false;
    }
    if(lagBillett.fornavn === ""){
        document.getElementById("fornavnFeil").innerHTML = "<span style='color: red'>Du må skrive inn fornavnet.</span>";
        isValid = false;
    }
    if(lagBillett.etternavn === ""){
        document.getElementById("etternavnFeil").innerHTML = "<span style='color: red'>Du må skrive inn etternavnet.</span>";
        isValid = false;
    }
    if(lagBillett.telefonnr === ""){
        document.getElementById("telefonnrFeil").innerHTML = "<span style='color: red'>Du må skrive inn telefonnummer.</span>";
        isValid = false;
    }
    if(lagBillett.epost === ""){
        document.getElementById("epostFeil").innerHTML = "<span style='color: red'>Du må skrive inn epostadresse.</span>";
        isValid = false;
    }

    // 3. 只有验证通过时，才执行购票逻辑
    if(isValid){
        billett.push(lagBillett);
        // 清空表单
        document.getElementById("film").value="";
        document.getElementById("antall").value="";
        document.getElementById("fornavn").value="";
        document.getElementById("etternavn").value="";
        document.getElementById("telefonnr").value="";
        document.getElementById("epost").value="";
        visBillett();
    }
}

function visBillett() {
    let ut = "<table><tr>" +
            "<th>Film</th><th>Antall</th><th>Fornavn</th>" +
            "<th>Etternavn</th><th>Telefonnr</th><th>Epost</th>" +
            "</tr>";
    for(let b of billett) {
        ut += "<tr>";
        ut += "<td>"+b.film+"</td><td>"+b.antall+"</td><td>"+b.fornavn+"</td>";
        ut += "<td>"+b.etternavn+"</td><td>"+b.telefonnr+"</td><td>"+b.epost+"</td>";
        ut += "</tr>";
    }
    document.getElementById("billett").innerHTML=ut;
}

function slettBilletter() {
    document.getElementById("billett").innerHTML = "";
    billett = []; // 这里建议清空数组，不然点击删除后再添加会重复之前的票据
}

关键修改说明： #

• 提前清空错误提示：每次提交表单时先把所有错误区域清空，确保用户看到的是当前提交的验证结果。
• 去掉return false：原来的return会让函数在第一个错误就停止，现在改成用isValid变量跟踪验证状态，所有字段都会被检查一遍。
• 验证通过后再处理业务逻辑：只有当所有字段都填写正确时，才会添加票据、清空表单并刷新列表。
• 额外优化：在slettBilletter函数里添加了billett = []，不然删除页面显示后，数组里的票据还存在，再次提交会重复添加之前的内容。

这样修改后，用户提交表单时所有空字段的错误都会同时显示出来，不用逐个修复后才能看到下一个错误啦～

内容的提问来源于stack exchange，提问作者Michal Pajestka