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

}

I believe it happens because you return false. Whenever you return a value, the execution of the function will end. — Damian Kociszewski
– Damian Kociszewski, Commented Feb 9, 2021 at 14:19
Thats what I thought too, but if I dont return the false, the ticket will be pushed even though inputs are missing. — Michal Pajestka
– Michal Pajestka, Commented Feb 9, 2021 at 14:22
Better keep showing the your own attempts, ideally try for a minimal reproducible example. — Yunnosch
– Yunnosch, Commented Feb 9, 2021 at 15:52

Terminat · Accepted Answer · 2021-02-09 14:47:47Z

2

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;
}

edited Feb 9, 2021 at 14:47

answered Feb 9, 2021 at 14:21

Terminat

1,2477 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Michal Pajestka Over a year ago

This seem to work! The only problem now is that after the return isValid;, I get an error message saying "Unreachable code" which is reffering to the "document.get.elementByID" statments below the if-statment.

Terminat Over a year ago

Ah okay, I know what's the problem, I just copied half of your function and not entire one. Check updated code

Michal Pajestka Over a year ago

Now if an input is empty, the tichet is not pushed, but none of the errors show up :/

Terminat Over a year ago

Well, you're setting innerHTML of elements to empty string there, so you're just clearing the errors. I don't know what you want to achieve here, but if you remove all those innerHTML="" it will work fine

Michal Pajestka Over a year ago

If I dont clear the errors, they will be shown even after all inputs are inn

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related