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>

[admin]

Du hast im Code ja das stehen.

Code:

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

Versuche es mal mit type="date" , vielleicht reicht dir das dann schon , weil du dann Datumsformate eingeben musst.
Da gehen dann nur Zahlen , oder du bekommst ein Kalender angezeigt, wo man ein Datum auswählen kann

[admin]

input type="name" gibt es auch nicht , da musst du type="text" nehmen

[Ems]

input type="name" gibt es auch nicht , da musst du type="text" nehmen

Danke, das habe ich jetzt geändert, nur zeigt es mir immer noch, sobald ich speichern drücke an, dass ich alle Felder ausfüllen soll, obwohl ich es gemacht habe. 

Ich habe den Teil jetzt nochmal verändert, aber es funktioniert immer noch nicht.

Code:

function validierung(Vorname,Nachname,Geburtstag) {
    if (Vorname == " " ||   Nachname == " " || Geburtstag == 0) {
          alert ("Bitte fülle alle Felder aus! ");
          return false;
       
    }
    else
        alert ("Eingaben wurden gespeichert");
        return true; }
/* irgendwas stimmt hier nicht, aber ich finde den Fehler nicht */

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

Liebe Grüße

[admin]

Ich würde das erstmal alles so machen.

Warum das mit dem Datumsfeld noch nicht richtig geht, checke ich gleich noch.
Da sind noch 2 Fehler drinnen . Ändere die aber gleich, wenn ich wieder zu Hause bin. So hast du aber schon mal ein Anfangspunkt wo du wieder machen kannst

[admin]

Ich habe mal alles so an Fehler und unnützen Code entsorg.

Dann sollte das so auch jetzt laufen

[rzscout]

Auch wenn der Post etwas älter ist. Mir ist aufgefallen, dass du const verwendest. Dieser Wert kann nicht überschrieben werden. Deklariere die Variablen mit var.


Ich habe hier mal ein eigenes Beispiel angelegt. Vielleicht hilft der Code weiter.

Code:

'use strict';
var vorname, vornameInput, nachname, nachnameInput, geburtstdatum, geburtsdatumInput, about, aboutInput, speicherButton, ausgabe;
document.addEventListener('DOMContentLoaded', () => {
    speicherButton = document.getElementById('enter-button');
    vornameInput = document.getElementById('Vorname-Input');
    nachnameInput = document.getElementById('Nachname-input');
    geburtsdatumInput = document.getElementById('Geburtsdatum-input');
    aboutInput = document.getElementById('uebermich-input');
    ausgabe = document.getElementById('ausgabe');
    speicherbutton.addEventListener('click', validiere);
});
function validiere() {
    vorname = vornameInput.value;
    nachname = nachnameInput.value;
    geburtsdatum = geburtsdatumInput.value;
    let errorCount = 0;
    let errorMessages = [];
    if(vorname=='' || vorname==null || vorname.length<1) {
        errorCount++;
        errorMessages = errorMessages.push('Die Eingabe des Vornamens war leider fehlerhaft');
    }
    if(nachname=='' || nachname==null || nachname.length<1) {
        errorCount++;
        errorMessages = errorMessages.push('Die Eingabe des Nachnamens war leider fehlerhaft');
    }
    if(about=='' || about==null || about.length<1) {
        errorMessages = errorMessages.push('Die Eingabe Über mich war leider fehlerhaft');
        errorCount++;
    }
    geburtsdatum = Date.parse(geburtsdatum);
    if(!isNan(geburtsdatum)) {
        errorCount++;
        errorMessages = errorMessages.push('Die Eingabe des Datums war leider fehlerhaft');
    }
    if(errCount<1) {
        macheIrgendetwas();

    } else {
        errorMessages.forEach((currentValue) => {            
            let elem = document.createElement('p');
            elem.textContent = currentValue;
            ausgabe.appendChild(elem);
        });
    }    
}