function exibeErro não é mostrada | JavaScript: programando na linguagem da web

Estou implementando o código javascript que aprendi nesse curso num formulário de contato de um site. Decidi exibir as mensagens de erro de validação da mesma forma, mas não sei o que está dando errado. Alguém saberia me explicar, por favor?

contact.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/site.css">
    <link rel="stylesheet" href="css/contact.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dosis">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dosis:500">
    <title>Messora</title>
</head>
<body>
    <main class="background">
        <nav class="navigation">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="music.html">Music</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="">Store</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
            <img class="main-title" src="img/logo.png">
        </nav>
        <div class="contact">Contact</div>
        <div class="container">
            <form name="contactForm" autocomplete="on">
                <fieldset>
                    <label for="name">Name</label>
                    <input type="text" id="name" name="name" placeholder="Your name" autofocus >
                    <ul id="error-message"></ul>
                    <label for="email">Email</label>
                    <input type="text" id="email" name="email" placeholder="your@email.com" required="">
                    <ul id="error-message"></ul>
                </fieldset>
                <fieldset>
                    <label for="msg" autocomplete="off">Message</label>
                    <textarea id="msg" name="message" cols="60" rows="10" placeholder="Type your message here" required></textarea>
                    <ul id="error-message"></ul>
                    <button id="send" type="submit">Send</button>
                </fieldset>
            </form>
        </div>
    </main>
    <footer class="bottom-page">
        © Messora 2019
    </footer>

    <script src="js/form.js"></script>

</body>
</html>

form.js

var contact = document.querySelector("#send");
 contact.addEventListener("click", function(event) {
    event.preventDefault();

    var erros = validateForm(contact);
    console.log(erros);

    if(erros.lenght > 0) {
        exibeErro(erros);
        return;
    }

    var errorMessage = document.querySelector("#error-message");
    errorMessage.innerHTML = "";

})

function exibeErro(erros) {
    var ul = document.querySelector("#error-message");
    ul.innerHTML = "";

    erros.forEach(function(erro){
        var li = document.createElement("li");
        li.textContent = erro;
        ul.appendChild(li);
    })
}

function validateForm(contact) {

    var erros = [];

    if (document.forms["contactForm"]["name"].value == "") {
        erros.push("Name must be filled out");
    }

    if (document.forms["contactForm"]["email"].value == "") {
        erros.push("Email must be filled out");
    }

    if (document.forms["contactForm"]["msg"].value == "") {
        erros.push("Message cannot be blank");
    }

    return erros;
}

E está lá na file do CSS também. index.css

#error-message {
    color: red;
}

Toda ajuda é bem vinda, obrigada!!

Mergulhe em programação