How to show all input errors at once in Javascript/HTML

Question

For a school assignment we were tasted with creating a javascript application that lets you buy a cinema ticket. When an input is empty, it is supposed to show an error. Which works fine, but the problem is that if there is more than one empty input, only one error is shown until it is fixed. Does someone have a solution to that?

HTML:

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="script:js"></script> </head> <body> <h1>Bestilling av kinobiletter</h1> <table> <tr> <td><label for="film">Velg en film.</label></td> <td> <select id="film"> <option disabled selected value="">Velg film</option> <option>Godzilla vs: Kong</option> <option>The SpongeBob Movie</option> <option>Black Widow</option> <option>Matrix 4</option> </select> </td> <td><div id="filmFeil"></div></td> </tr> <tr> <td><label for="antall">Antall:</label></td> <td><input type="number" style="width: 35px" min="1" max="99" id="antall"></td> <td><div id="antallFeil"></div></td> </tr> <tr> <td>Fornavn</td><td><input type="text" id="fornavn"></td> <td><div id="fornavnFeil"></div></td> </tr> <tr> <td>Etternavn</td><td><input type="text" id="etternavn"></td> <td><div id="etternavnFeil"></div></td> </tr> <tr> <td>Telefonnr</td><td><input type="text" id="telefonnr"></td> <td><div id="telefonnrFeil"></div></td> </tr> <tr> <td>Epost</td><td><input type="text" id="epost"></td> <td><div id="epostFeil"></div></td> </tr> <tr> <td><button onclick="kjopBillett()">Kjøp billett</button></td> </tr> </table> <h2>Alle billetter</h2> <div id="billett"></div> <div id="slett"> <button value="Slett billetter" onclick="slettBilletter()">Slett alle billettene</button> </div> </body> </html>

JS:

let billett = [];
function kjopBillett() {
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
}

if(lagBillett.film === "") {
    document.getElementById("filmFeil").innerHTML =
        "<span style='color: red'>Du må velge en film.</span>"
    return false;

}
if(lagBillett.antall === "") {
    document.getElementById("antallFeil").innerHTML =
        "<span style='color: red'>Du må velge antall billeter.</span>"
    return false;
}
if(lagBillett.fornavn === ""){
    document.getElementById("fornavnFeil").innerHTML =
        "<span style='color: red'>Du må skrive inn fornavnet.</span>"
    return false;
}
if(lagBillett.etternavn === ""){
    document.getElementById("etternavnFeil").innerHTML =
        "<span style='color: red'>Du må skrive inn etternavnet.</span>"
    return false;
}
if(lagBillett.telefonnr === ""){
    document.getElementById("telefonnrFeil").innerHTML =
        "<span style='color: red'>Du må skrive inn telefonnummer.</span>"
    return false;
}
if(lagBillett.epost === ""){
    document.getElementById("epostFeil").innerHTML =
        "<span style='color: red'>Du må skrive inn epostadresse.</span>"
    return false;
}
else{
    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="";

document.getElementById("filmFeil").innerHTML="";
document.getElementById("antallFeil").innerHTML="";
document.getElementById("fornavnFeil").innerHTML="";
document.getElementById("etternavnFeil").innerHTML="";
document.getElementById("telefonnrFeil").innerHTML="";
document.getElementById("epostFeil").innerHTML="";

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 = "";

}

Answer 1

You're returning false in each of these if statements. If you're returning the value from the function, that also means its execution finishes, so other if statements are not reached. To fix it define new variable holding the boolean value, that you will reasign when the if statement condition is met. Then at the end of your function return this value.

Here you have the fixed code:

 function kjopBillett() { 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; 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; } 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=""; document.getElementById("filmFeil").innerHTML=""; document.getElementById("antallFeil").innerHTML=""; document.getElementById("fornavnFeil").innerHTML=""; document.getElementById("etternavnFeil").innerHTML=""; document.getElementById("telefonnrFeil").innerHTML=""; document.getElementById("epostFeil").innerHTML=""; visBillett(); return isValid; }

How to show all input errors at once in Javascript/HTML

Question

1 answers

solution1
2 2021-02-09 14:21:02

How to show all input errors at once in Javascript/HTML

Question

1 answers

solution1 2 2021-02-09 14:21:02

solution1
2 2021-02-09 14:21:02