Problem mit Formular

[Ems]

Hallo zusammen,

ich habe ein Problem mit meinem Formular.
Und zwar meldet es mir immer, dass Ich alles ausfüllen soll, obwohl ich alles ausgefüllt habe und ich finde den Fehler in meinem Code nicht.
 
Außerdem möchte ich, dass wenn man im Geburtstagsfeld Buchstaben eingibt, ein Fehler erscheint und außerdem möchte ich, dass man nur im dd/mm/yyyy Format das Feld ausfüllen kann.

Vielleicht kann mir einer von euch helfen.

Dankeschön!


CSS - Datei:

Code:

/* Navigation*/

[href] {
    text-decoration: none;
    color: black;
       
}

a:hover{
    text-decoration: none;
    color:var(--brown);
   
}

a:focus{
    text-decoration: underline;
}

#navibereich {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap ;
    text-decoration: none;
    justify-content: flex-start;
    background-color: var(--bright);
    list-style-type: none;
    margin-bottom: 3px;
   
    }


#navi02{
    margin-left:5%;
    margin-right:5%;
}


/*  ---------Schrift- und Hintergrundbearbeitung-------------*/

:root{
     --bright: #e0c2a5;
     --brown: #684536;
     --background: #fffee9;
     --cream: #f3ecc5;


}

@font-face {
    font-family: Open Sans;
    src: url(<link rel="preconnect" <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">);
  }

div.label {   
    font-family: Open Sans;
    font-size: 20px;
    background-color:var(--bright);
    padding: 15px;
   
}

p  {
      font-family: Open Sans;
      font-size: 15px;
      width:70vw;
  }

label{
      font-family: Open Sans;
      font-size: 15px;
      width:70vw;
   
}

  p::selection{
      color: white;
  }

h1 {
    font-family: Open Sans;
    font-size: 40px;
    width:70vw;
}

h2{
        font-family: Open Sans;
        font-size: 20px;
}

body {
    background-color:var(--background);

}

/* -----------Feed bearbeitung----------*/

main {
    background-color: var(--cream);
    padding-top: 1%;
    display: block;
    text-align: center;
}

.Ann {
    background-color: var(--background);
    padding-top: 1%;
    padding-bottom: 1%;
}

.TextAnn {
    display: flex;
    justify-content: center;
    text-align: center;
    background-color: var(--cream);
    margin-top: 1%;
}
p.Ann{
    color: var(--brown);
}

.KommentarAnn{
    font-family: Open Sans;
    font-size: 15px;
    padding: 15px;
    background-color:var(--cream);
    margin-top:1%;
   }


.Lena {
    background-color: var(--background);
    padding-top: 1% ;
    padding-bottom: 2%;
  }

  .TextLena{
    display: flex;
    justify-content: center;
    text-align: center;
    background-color: var(--cream);
    margin-top: 1%;
  }
  p.Lena{
    color: var(--brown);
}

  .KommentarLena{
    font-family: Open Sans;
    font-size: 15px;
    padding: 15px;
    background-color: var(--cream);
    margin-top: 1%;
   }

   /*Profil*/

   .Lukas{
    background-color: var(--background);
    padding-top: 1% ;
    padding-bottom: 2%;
  }

  .Eingabe{
      margin: 1%;
  }

  .field{
      margin-bottom: 1%;
      }

  .Formelles{

    text-align: match-parent;

}

   /*------------*/

   
img {
    padding-right: 1%;
}
  .LukasBilder{
      padding: 2%;
  }
 
h3:hover {     
transition: background-color 2s ;
background-color: var(--brown);

  }

 

JS-Datei:

Code:

const VornameInput = document.getElementById("Vorname-input");
const NachnameInput = document.getElementById("Nachname-input");
const GeburtstagInput = document.getElementById("Geburtstag-input");
const ueberMichInput = document.getElementById("ueber-mich");
const SpeicherButton = document.getElementById("enter-button");

SpeicherButton.addEventListener("click", enterEvent);

const Vorname = VornameInput.value;
const Nachname = NachnameInput.value;
const Geburtstag = GeburtstagInput.value;
const ueberMich = ueberMichInput.value;


function createNewEventEntry() {

    let Vorname = VornameInput.value;
    let Nachname = NachnameInput.value;
    let Geburtstag = GeburtstagInput.value;
    let ueberMich= ueberMichInput.value;
   
}

function felderInKonsoleAusgeben () {
     console.log("Vorname:", Vorname);
     console.log("Nachname:", Nachname);
     console.log("Geburtstag:", Geburtstag);
     console.log("UeberMich:", ueberMich);
     
}

     
function validierung(Vorname, Nachname, Geburtstag) {
    if (!Vorname || !Nachname || !Geburtstag) {
        alert("Bitte fülle alle Felder aus! ");
        return false; }

        if (isNaN(Geburtstag)) {
            alert("Gebe den Geburtstag als Zahl an!");
            return false;
        }

return;
}

function enterEvent(evt) {
    evt.preventDefault();
    felderInKonsoleAusgeben;
    createNewEventEntry();
    validierung(Vorname, Nachname, Geburtstag, ueberMich);
}

HTML-Datei:

Code:

<!DOCTYPE html>
<html lang="de">
  <head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Das wird einmal ein Instagram Clone" />
    <meta name="keywords" content="Instagram, Instagram 2.0, Clone" />
    <meta name="author" content="Emily Schlachter" />

    <link rel="stylesheet" href="css/style.css" />
    <script src="scripts.js" defer></script>

    <title>Instagram 2.0</title>
  </head>

  <body>
      <header>
        <div > <a href="instagram-clone_schlachter.html"> <h1>Gramml</h1> </a ></div>
         </header>

         <ul id="navibereich">
          <li id="navi01"> <a href="profil.html"> <h2>Mein Profil </h2> </a> </li>
          <li id="navi02"> <a href="instagram-clone_schlachter.html"> <h2>Entdecken</h2></a> </li>
          <li id="navi01"> <a href="upload.html"><h2>Upload Picture</h2></a> </li>
            </ul>

          <div class="label">
            <label>Suche:</label>
            <input type="text"/>
            </div>
     

     <main>

       <div class="Lukas">
         <h2>Lukas_W3br</h2> <br>

        <img
src="images/profilpic.jpg"
alt="Profil"
title="Profil"
height="150">
    </div>

 
    <div class="Eingabe" id="Eingabe">
     
    <div class="field">
                          <input id="Vorname-input" type="name" name="name" placeholder="Vorname" />
      </div>

      <div class="field">
                          <input id="Nachname-input" type="name" name="name" placeholder="Nachname" />
        </div>

        <div class="field">
                           <input id="Geburtstag-input" type="Datum" name="Datum" placeholder="Geburtsdatum" />
      </div>

      <label>Über mich: <br> </label> 
      <textarea name="Über mich" id="ueber-mich" cols="40" rows="5" maxcols="35" placeholder="Über mich:"  > </textarea>
    </div>

    <div class="Formelles">   
      <p> <input type="checkbox" name="AGB" value="News"> Datenschutzerklärung und AGB akzeptieren. </p> 
      </div>
     
      <button id="enter-button" class=" button" type="submit">
       Speichern
    </button>

     
     

     <div class="LukasBilder">
       <img
     src="images/hiking.webp"
     alt="Wanderung"
     title="Wanderung"
     height="150">

      <img
    src="images/yellow_jacked.webp"
    alt="Wanderung"
    title="Wanderung"
    width="250"
    height="150">

     <img
      src="images/dog_human.jpg"
  alt="Hund"
  title="Hund"
  width="250"
  height="150">
    </div>


</main>
       

  </body>
 
</html>