考虑创建一个包含错误列表的 div 元素，将其放在表单的顶部。

然后您可以轻松地将一些代码集成到您的 showError() 函数中，在此示例中，我只是检查了您已经创建的各种错误 span 元素的文本内容，当出现错误时，它会镜像到表单顶部。

const form  = document.getElementsByTagName('form')[0];
    const email = document.getElementById('mail');
    const emailError = document.querySelector('#mail + span.error');
    const navn = document.getElementById('navn');
    const navnError = document.querySelector('#navn + span.error');
    const telefon = document.getElementById('telefon');
    const telefonError = document.querySelector('#telefon + span.error')
    const message = document.getElementById('message');
    const messageError = document.querySelector('#message + span.error')
    
    
    // THIS DIV WILL CONTAIN ERROR MESSAGES
    const errOutput = document.querySelector('.errorsOutput')


    email.addEventListener('input', function (event) {
      if (email.validity.valid) {
        emailError.innerHTML = ''; 
        emailError.className = 'error'; 
      } else {
        showError();
      }
    
    });


    navn.addEventListener('input', function (event) {

        if (navn.validity.valid) {
            navnError.innerHTML = '';
            navnError.className = 'error';

        } else {
            showError();
        }

    })

     telefon.addEventListener('input', function (event) {

        if (telefon.validity.valid) {
            telefonError.innerHTML = '';
            telefonError.className = 'error';

        } else {
            showError();
        }

    })

    
    message.addEventListener('input', function (event) {

        if (message.validity.valid) {
            messageError.innerHTML = '';
            messageError.className = 'error';

        } else {
            showError();
        }

    })

    form.addEventListener('submit', function (event) {

      if(!email.validity.valid || !navn.validity.valid || !telefon.validity.valid || !message.validity.valid) {
        showError();
        event.preventDefault();
      }
 
    });



    function showError() {
    
      // EMPTY ERRORS DIV
      errOutput.innerHTML = ''
      
      if(email.validity.valueMissing) {

        emailError.textContent = 'Vennligst fyll inn e-posten din';
      } else if(email.validity.typeMismatch) {
 
        emailError.textContent = 'Dette er ikke en gyldig e-postadresse.';
      } else if(email.validity.tooShort) {

        emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`;
      }
      // OUTPUT ERRORS IN DIV
      if (emailError.textContent != '') {
        errOutput.innerHTML += '<p>Email error!</p>'
      }
      
      if(navn.validity.valueMissing) {
          navnError.textContent = 'Du må fylle inn navnet ditt';
      } else if(navn.validity.tooShort) {
          navnError.textContect = 'Du må fylle inn hele navnet ditt'
      }
      // OUTPUT ERRORS IN DIV
      if (navnError.textContent != '') {
        errOutput.innerHTML += '<p>Navn error!</p>'
      }
      
      if(telefon.validity.valueMissing) {
          telefonError.textContent = 'Du må fylle inn telefonnummeret ditt'
      } else if(telefon.validity.tooShort) {
          telefonError.textContent = 'Du mangler ett eller flere tall. Vennligst dobbeltsjekk.'
      }
      // OUTPUT ERRORS IN DIV
      if (telefonError.textContent != '') {
        errOutput.innerHTML += '<p>Telefonnummer error!</p>'
      }
      
      if(message.validity.valueMissing) {
        messageError.textContent = 'Beskjeden mangler, vennligst fyll inn'
      } else if(message.validity.tooShort) {
        messageError.textContent = `Beskjed må være minst ${ message.minLength } tegn.`;
      }
      // OUTPUT ERRORS IN DIV
      if (messageError.textContent != '') {
        errOutput.innerHTML += '<p>Message error!</p>'
      }
   }
      

      // Set the styling appropriately
      emailError.className = 'error active';
      navnError.className = 'error active';
      telefonError.className = 'error active';
      messageError.className ='error active';

body {
    font: 1em sans-serif;
    width: 200px;
    padding: 0;
    margin : 0 auto;
  }

  p * {
    display: block;
  }

  input[type=email]{
    -webkit-appearance: none;
    appearance: none;

    width: 100%;
    border: 1px solid #333;
    margin: 0;

    font-family: inherit;
    font-size: 90%;

    box-sizing: border-box;
  }

  /* This is our style for the invalid fields */
  input:invalid{
    border-color: #900;
    background-color: #FDD;
  }

  input:focus:invalid {
    outline: none;
  }

  /* This is the style of our error messages */
  .error {
    width  : 100%;
    padding: 0;

    font-size: 80%;
    color: white;
    background-color: #900;
    border-radius: 0 0 5px 5px;

    box-sizing: border-box;
  }

  .error.active {
    padding: 0.3em;
  }

<!DOCTYPE html>
<html>

<head>
  <script src="jquery-3.6.0.min.js"></script>
  <script src="kontaktskjema.js"></script>
    <link rel="stylesheet" href="kontakt.css">
    <meta charset="utf-8">
    <title>Detailed custom validation</title>
</head>

<body>
    
    <!-- THIS DIV WILL CONTAIN ERROR MESSAGES -->
    <div class="errorsOutput"></div>
    
    <div class="kontaktskjema">
        <form novalidate>
          <p>
          <label for="navn">
          <span>Navn:</span>
        <input type="text" id="navn" name="navn" required minlength="3">
        <span class="error" aria-live="polite"></span>
      </label>
    </p>    
  </div>
    <form novalidate>
        <p>
          <label for="name">
            <span>Telefonnummer:</span>
            <input type="tel" id="telefon" name="telefon" required minlength="8">
            <span class="error" aria-live="polite"></span>
          </label>
        </p>
        <form novalidate>
            <p>
              <label for="mail">
                <span>E-post:</span>
                <input type="email" id="mail" name="mail" required minlength="6">
                <span class="error" aria-live="polite"></span>
              </label>
            </p>
            <form novalidate>
                <p>
                  <label for="message">
                    <span>Beskjed:</span>
                    <input type="text" id="message" name="message" required minlength="10">
                    <span class="error" aria-live="polite"></span>
                  </label>
                </p>
    <button>Send</button>
  </form>
</div>
<script src="kontakt.js"></script>

</body>

</html>