-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvalidation.html
141 lines (122 loc) · 6.95 KB
/
validation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Form Validation</title>
<script src="assets/java/dom2.js" defer ></script> <!-- Script für JS-Datei (mit "defer" solte es manchmal gehen)-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<nav>
<div class="sidenav">
<a href="index.html"><h3>Menü</h3></a>
<a href="javaStart.html"><h5>Java-Page</h5></a>
<a href="dom.html"><h5>Dom-Page</h5></a>
<a href="mySecondDom.html" class="Dom"><h5>Dom II-Page</h5></a>
<a href="logicalExpr.html" class="Dom"><h5>Log. Expr</h5></a>
<a href="validation.html" class="Dom"><h5>Validation</h5></a>
<a href="form.html" class="Dom"><h5>Form</h5></a>
</div>
</nav>
<main>
<h1 id="app">Bitte trage deinen vollständigen Namen ein!</h1>
<div class="alert alert-info border border-primary" role="alert">
<script>
/**
*TODO Vorbereitungen:
!) Neue Datei my-first-form-validation.html (ohne Bootstrap)
a) <form> mit zwei input Feldern vom Typ 'text'.
b) Ein input Feld vom Typ 'number'
c) <button> mit der Beschriftung "Validieren" ausserhalb <form>
d) <p> für eine Fehlermeldung unterhalb dem Button
*TODO Validierungen mit JavaScript (inkl. Fehlermeldung):
1) das erste input Feld darf nicht leer sein
2) beide input Felder dürfen nicht leer sein
3) das zweite input Feld muss ein '@' enthalten
4) der Wert n im Nummernfeld erfüllt 0 <= n <= 10
*? https://www.w3schools.com/html/html_form_input_types.asp
document.getElementById('blah');
document.querySelectorAll('input[type="text"]');
forEach(myFunction);
*/
function validateVorName() {
let inputElement = document.getElementById("vName");
let value = inputElement.value;
if (!value){
// Beispiele: " ", null, undefined
setMessage1("Bitte den Vornamen eingeben.");
}
/**
*! Ab hier enthält value einen nicht leeren String.
*? indexOf() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf?retiredLocale=de */
else if (value.indexOf("@") === -1){
//value enhält KEIN '@' Symbol.
setMessage1("Bitte im Vornamen ein '@' einfügen");
}
else {
setMessage1(value);
}
}
function validateNachName(){
let inputElement = document.getElementById("nName");
let value = inputElement.value;
if (!value){
// Beispiele: " ", null, undefined */
setMessage2("Bitte den Nachnamen eingeben.");
}
else {
setMessage2(value);
}
}
function validateAge() {
let inputElement = document.getElementById("age");
let value = inputElement.value;
if (!value){
// Beispiele: " ", null, undefined
setMessage3("Bitte das Alter eingeben.");
}
else if (value < 0 || value > 99) { //NOT ( 0<= n <= 99})
// Entweder ist die Zahl kleiner als Null oder grösser als 99.
setMessage3("Entweder ist die Zahl kleiner als Null oder grösser als 99.");
}
else {
setMessage3(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 alertFunction(){
alert("Das Formular wurde abgeschickt.");
}
</script>
<form id="form1" targer="_self" onsubmit="alertFunction()">
<fieldset>
<legend>Personalien:</legend>
<label for ="vname">Vorname:</label><br>
<input type ="text" id="vName" name="vName" value="Rio"><br>
<label for ="nName">Nachname:</label><br>
<input type ="text" id="nName" name="nName" value="Burbi"><br><br>
<label for ="age"> Alter (Zwischen 1 und 99):</label><br>
<input type ="number" id="age" name="age" min="1" max="99"><br><br>
<button onclick= "validateVorName(); validateNachName(); validateAge();" type="submit" form="form1" value="Submit">Validieren</button>
<input type="Reset">
</fieldset>
</form>
<!-- <button onclick= "validateVorName(); validateNachName(); validateAge();" type="submit" form="form1" value="Submit">Validieren</button>--> <p id= "message-1"></p>
<p id= "message-2"></p>
<p id= "message-3"></p>
</div>
</main>
</body>
</html>