Testen ob alle Datein ausgefüllt sind

Es wird vor dem Absenden geschaut ob alle Felder ausgefüllt sind

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> :root{ --bright: #e0c2a5; --brown: #684536; --background: #fffee9; --cream: #f3ecc5; } @font-face { font-family: Open Sans; src: url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap"); } *{ margin:0; padding:0; box-sizing:border-box; } body{ display:flex; flex-direction:column; background:var(--background); } header { display:flex; flex-direction:row; justify-content:flex-start; margin-left:50px; padding: 30px 0; } header h1 { font-family: Open Sans; font-size: 40px; } nav ul { height: 60px; display: flex; flex-direction: row; justify-content: flex-start; background: var(--bright); margin-bottom: 3px; align-content: space-around; align-items: center; } nav ul li{ flex:1; list-style:none; text-align:center; } nav ul li a{ text-align:center; text-decoration:none; color:black; font-size:20px; } a:hover{ color:var(--brown); } div.label { font-family: Open Sans; font-size: 20px; background:var(--bright); padding: 15px; } main{ padding-top: 1%; display: flex; flex-direction:column; } .ueber { display: flex; flex-direction: column; align-items: center; height:90px; padding:30px 0 40px 0; } h2{ font-family: Open Sans; font-size: 20px; } .line { display: flex; flex-direction: column; background: var(--cream); align-content: stretch; align-items: center; margin:5px 0; } p { font-family: Open Sans; } footer{ display:flex; } textarea{ width:100%; min-height:100px; } footer img{ width:calc(100% / 3); text-align:center; max-height:50px; } </style> </head> <body> <header> <h1> <a href="instagram-clone_schlachter.html"> Gramml</a></h1> </header> <nav> <ul id="navibereich"> <li id="navi01"> <a href="profil.html"> Mein Profil </a> </li> <li id="navi02"> <a href="instagram-clone_schlachter.html"> Entdecken</a> </li> <li id="navi03"> <a href="upload.html">Upload Picture</a> </li> </ul> </nav> <div class="label"> <label>Suche:</label> <input id="textsuxhe" type="text"/> </div> <main> <div class="ueber"> <h2>Lukas_W3br</h2> <img src="images/profilpic.jpg" alt="Profil" title="Profil" height="150"> </div> <div class="line" id="Eingabe"> <div class="field"> <input id="Vorname" type="text" name="Vorname" placeholder="Vorname" /> </div> <div class="field"> <input id="Nachname" type="text" name="Nachname" placeholder="Nachname" /> </div> <div class="field"> <input id="Geburtstag" type="date" name="Geburtstag" placeholder="Geburtsdatum" /> </div> <div class="line"> <label>Über mich: </label> <textarea name="Über" id="ueber" placeholder="Über mich:"> </textarea> </div> <div class="line"> <p> <input id="check" type="checkbox" name="AGB" value="News"> Datenschutzerklärung und AGB akzeptieren. </p> </div> <div class="line"> <button id="enter" class=" button" type="submit">Speichern</button> </div> </div> </main> <footer 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"> </footer> <script> var VornameInput = document.getElementById("Vorname"); var NachnameInput = document.getElementById("Nachname"); var GeburtstagInput = document.getElementById("Geburtstag"); var ueberMichInput = document.getElementById("ueber"); var che= document.getElementById("check"); var minlenge=5; var but=document.getElementById("enter"); but.addEventListener("click",function(){ var error=''; if (VornameInput.value=='') { //console.log("Vorname:", VornameInput.value); error+="\nBitte gebe dein Vorname ein ! "; } if (NachnameInput.value=='') { //console.log("Nachname:", NachnameInput.value); error+="\nBitte gebe dein Nachname ein ! "; } if (!GeburtstagInput.value) { // console.log("Geburtstag :", GeburtstagInput.value); error+="\nBitte gebe dein geburtstag ein ! "; } if (ueberMichInput.value=='') { // console.log('UeberMich: gebe mindestenst '+minlenge+' zeichen in über mich ein'); error+='\nÜeber Mich: gebe mindestenst '+minlenge+' zeichen in über mich ein !'; }else{ var menge=lange(); error+=menge; } function lange(){ if(ueberMichInput.value.length<=minlenge){ //console.log("Lenge text", ueberMichInput.value.length+1); return "\nDu must noch mindestens "+(minlenge-ueberMichInput.value.length+1)+" an zeichen Über dich angeben angeben !"; }else{ } } if(check.checked==false){ error+="\nSie müssen die datenschutz checkbox noch anklicken !"; } console.log(error+'='+error.length) if(error=='undefined' || error==null || error==''){ alert('alle,daten richtig ausgefüllt'); }else if(error.length>10){ alert(error); } }) </script> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!