Skip to content

Commit

Permalink
v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@RaphRiots
RaphRiots committed Dec 15, 2022
1 parent 0611a6f commit 08bab75
Show file tree
Hide file tree
Showing 2 changed files with 190 additions and 19 deletions.
4 changes: 4 additions & 0 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,4 +59,8 @@ main{
width: 160px;
height: 120px;
background-color: blue;
}

#comment{
font-size: 20px;
}
205 changes: 186 additions & 19 deletions form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,38 +25,205 @@
<h1 id="app">Bitte trage deine vollständigen Angaben ein!</h1>

<div class="alert alert-info border border-primary" role="alert">
<script>

<form id="form1" targer="_self" onsubmit="alertFunction()">

// Validiert das Geschlecht
function valGender(){
var gender = document.getElementById("gender");
if (gender.value == ""){
//Wenn die "Auswahl" Option gewählt wurde, zeige mir den Display Error.
setMessage1("Bitte Anrede auswählen!");
return false;
}
return true;

}

// Validiert den Vornamen
function valVorName() {
let inputElement = document.getElementById("vName");
let value = inputElement.value;

if (!value){
// Beispiele: " ", null, undefined */
setMessage2("Bitte den Vornamen eingeben.");
}
else {
setMessage2(value);
}
}

// Validiert den Nachnamen
function valNachName(){
let inputElement = document.getElementById("nName");
let value = inputElement.value;

if (!value){
// Beispiele: " ", null, undefined */
setMessage3("Bitte den Nachnamen eingeben.");
}
else {
setMessage3(value);
}
}

function old(age){
let.inputElement =document.getElementById("bday");
let value =inputElement.value;
if (age>=18){
return'You can sign in you Perv.';
}
else{
return'You must be at least 18 to sign up.'
}
}

// Validiert die Email
function valEmail() {
let inputElement = document.getElementById("email");
let value = inputElement.value;

if (!value){
// Beispiele: " ", null, undefined
setMessage2("Bitte E-Mail eingeben.");
}
/**
*! Ab hier enthält value einen nicht leeren String. */
else if (value.indexOf("@") === -1){
//value enhält KEIN '@' Symbol.
setMessage2("Bitte in E-Mail ein '@' einfügen");
}
else {
setMessage2(value);
}
}

// Validiert die Postleitzahl
function valPlz() {
let inputElement = document.getElementById("plz");
let value = inputElement.value;

if (!value){
// Beispiele: " ", null, undefined
setMessage4("Bitte Postleitzahl eingeben.");
}
else if (value < 1000 || value > 9658) { //NOT ( 1000<= n <= 9658})
// Entweder ist die Zahl kleiner als 1 oder grösser als 9658.
setMessage4("Entweder ist die Zahl kleiner als 1000 oder grösser als 9658.");
}
else {
setMessage4(value);
}
}

function setMessage1(value){
document.getElementById("message-1").innerText = value;
}
function setMessage2(value){
document.getElementById("message-2").innerText = value;
}

function setMessage3(value){
document.getElementById("message-3").innerText = value;
}

function setMessage4(value){
document.getElementById("message-4").innerText = value;
}

function alertFunction(){
alert("Das Formular wurde abgeschickt.");
}



</script>

<form id="form1" target="_self" onsubmit="alertFunction()">
<fieldset>
<legend><h1>Personalien:</h1></legend>

<label for ="gender">Geschlecht</label><br>
<select id="gender">
<option value="Mann">Mann</option>
<option value="Frau">Frau</option>
<option value="Non-Bin">Non-Binär</option>
</select>
<br>
<label for ="gender">Anrede:</label><br>
<select id="gender" required="required">
<option value="" selected disabled hidden>- Auswahl -</option>
<option value="Mann">Mann</option>
<option value="Frau">Frau</option>
<option value="Non-Bin">Non-Binär</option>
</select> *<br>

<label for ="firm">Firma:</label><br>
<input type ="text" id="firm" name="firm" placeholder="Global Corp." ><br><br>

<label for ="vName">Vorname:</label><br>
<input type ="text" id="vName" name="vName" /*value="Rio"*/ required><br>
<input type ="text" id="vName" name="vName" placeholder="Rio" required> *<br>

<label for ="nName">Nachname:</label><br>
<input type ="text" id="nName" name="nName" /*value="Burbi"*/ required><br>
<input type ="text" id="nName" name="nName" placeholder="Burbi" required> *<br>

<label for ="bday">Geburtsdatum:</label><br>
<input type ="date" id="bday" name="bday" required min=""> *<br>

<label for ="nName">Strasse:</label><br>
<input type ="text" id="street" name="street"placeholder="YoMama Strasse" required> *<br>

<label for ="plz"> PLZ:</label><br>
<input type ="number" id="plz" name="plz" min="1000" max="9658" placeholder="8000" required> *<br>

<!-- <label for ="ort">Kanton:</label><br>
<input type ="text" id="ort" name="ort" placeholder="Nowhere" required> *<br> -->

<label for ="ort">Kanton:</label><br>
<select id="ort" required="required">
<option value="" selected disabled hidden>- Auswahl -</option>
<option value="Aargau">Aargau</option>
<option value="Appenzell Ausserrhoden">Appenzell Ausserrhoden</option>
<option value="Appenzell Innerrhoden">Appenzell Innerrhoden</option>
<option value="Basel-Landschaft">Basel-Landschaft</option>
<option value="Basel-Stadt">Basel-Stadt</option>
<option value="Bern">Bern</option>
<option value="Freiburg">Freiburg</option>
<option value="Genf">Genf</option>
<option value="Glarus">Glarus</option>
<option value="Graubünden">Graubünden</option>
<option value="Jura">Jura</option>
<option value="Luzern">Luzern</option>
<option value="Neuenburg">Neuenburg</option>
<option value="Nidwalden">Nidwalden</option>
<option value="Obwalden">Obwalden</option>
<option value="St.Gallen">St.Gallen</option>
<option value="Schaffhausen">Schaffhausen</option>
<option value="Schwyz">Schwyz</option>
<option value="Solothurn">Solothurn</option>
<option value="Tessin">Tessin</option>
<option value="Thurgau">Thurgau</option>
<option value="Uri">Uri</option>
<option value="Waadt">Waadt</option>
<option value="Wallis">Wallis</option>
<option value="Zürich">Zürich</option>
<option value="Zug">Zug</option>


</select> *<br>

<label for ="birthday">Geburtstag:</label><br>
<input type ="date" id="birthday" name="birthday" /*value="Burbi"*/ required><br>

<label for ="firm">Firma:</label><br>
<input type ="text" id="firm" name="firm" /*value="Global Corp."*/ required><br><br>

<label for ="email">E-Mail:</label><br>
<input type ="email" id="email" name="email" /*value="[email protected]"*/ required><br><br>
<input type ="email" id="email" name="email" placeholder="[email protected]" required> *<br>

<label for ="telG"> Telefon Geschäftlich:</label><br>
<input type ="tel" id="telG" name="telG" placeholder="043 666 69 69" pattern="+41[0-9]{3}-[0-9]{2}-[0-9]{2}"><br>

<label for ="telP"> Telefon Privat:</label><br>
<input type ="number" id="telP" name="telP" placeholder="076 666 69 69" > *<br>


<label for ="comment"> Bemerkungen:</label><br>
<textarea id="comment" name="comment" rows="5" cols="30" placeholder="Weitere Bemerkungen?"></textarea><br>

<label for ="age"> Alter (Zwischen 1 und 99):</label><br>
<input type ="number" id="age" name="age" min="1" max="99" required><br><br>
<!-- <label for ="age"> Alter (Zwischen 1 und 99):</label><br>
<input type ="number" id="age" name="age" min="1000" max="99" required>*<br><br> -->

<button onclick= "validateVorName(); validateNachName(); validateAge();" type="submit" form="form1" value="Submit">Validieren</button>
<button onclick= " return valGender();valVorName(); valNachName(); valEmail(); valPlz()" type="submit" form="form1" value="Submit">Validieren</button>
<input type="Reset">
</fieldset>
</form>
Expand Down

0 comments on commit 08bab75

Please sign in to comment.