Problem mit Formular
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.
Der hier verwendete Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Instagram 2.0</title>
<style>
/* 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);
}
</style>
</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>
</div>
<div class="Eingabe" id="Eingabe">
<div class="field">
<input id="Vorname-input" type="text" name="name" placeholder="Vorname" />
</div>
<div class="field">
<input id="Nachname-input" type="text" name="name" placeholder="Nachname" />
</div>
<div class="field">
<input id="Geburtstag-input" type="date" 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 id="check" 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">
</div>
</main>
<script>
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 che= document.getElementById("check");
document.getElementById("enter-button").addEventListener("click",function(){
error='';
if(validierung(VornameInput.value, NachnameInput.value, GeburtstagInput.valueg,ueberMichInput.value)!=''){
alert(validierung(VornameInput.value, NachnameInput.value, GeburtstagInput.valueg,ueberMichInput.value));
}else{
alert('alle,daten richtig ausgefüllt');
}
})
function felderInKonsoleAusgeben () {
console.log("Vorname:", Vorname);
console.log("Nachname:", Nachname);
console.log("Geburtstag:", Geburtstag);
console.log("UeberMich:", ueberMich);
}
function validierung(Vorname, Nachname, Geburtstag,uervermich) {
if (Vorname=='') {
error+="\nBitte fülle dein Vorname ein! ";
}else{
}
if (Nachname=='') {
error+="\nBitte gebe dein Nachname ein ";
}else{
}
if (Geburtstag=='') {
error+="\nBitte gebe dein geburtstag ein! ";
}else{
}
if (uervermich=='') {
error+="\nBitte gebe was über dich an ";
}else{
if(uervermich.length<=3){
error+="\nGebe mindesatens 3 Zeichen ein";
}else{
}
}
if(check.checked==false){
error+="\nSie müssen die datenschutz checkbox noch anklicken";
}
return error;
}
</script>
</body>
</html>