This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Problem mit Formular
#1
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:
/* 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:
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:
<!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>
Zitieren
#2
Du hast im Code ja das stehen.
           <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
Als Lösung markieren Zitieren
#3
input type="name" gibt es auch nicht , da musst du type="text" nehmen
Als Lösung markieren Zitieren
#4
(07.05.2022, 00:14)admin schrieb: 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.

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
Als Lösung markieren Zitieren
#5
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
Als Lösung markieren Zitieren
#6
Ich habe mal alles so an Fehler und unnützen Code entsorg.

Dann sollte das so auch jetzt laufen
Als Lösung markieren Zitieren
#7
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.

'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);
		});
	}	
}
Als Lösung markieren Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste