workshop-2023/javascript/example05/index.html at main · tuub/workshop-2023 · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>JavaScript V</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="description" content="" />
</head>

<body>
<h1>JavaScript V</h1>

<p>
    Clientseitige Formularvalidierung.
</p>

<form id="form" action="/" method="GET">
    <div>
        <label for="username">Name:</label>
        <input type="text" name="username" id="username" autofocus required />
    </div>
    <div>
        <label for="password">Passwort:</label>
        <input type="password" name="password" id="password" required />
    </div>

    <div>
        <label for="password-confirm">Confirm Password: </label>
        <input type="password" name="password-confirm" id="password-confirm" required />
    </div>

    <button type="submit">Prüfen und absenden</button>
</form>

<div id="form-errors">Keine Fehler.</div>
</body>

<script>
    // Referenzen auf DOM-Elemente werden in Variablen gespeichert
    const form = document.querySelector('#form');
    const errorDiv = document.querySelector('#form-errors');
    const username = document.querySelector('#username');
    const password = document.querySelector('#password');
    const passwordConfirm = document.querySelector('#password-confirm');

    // EventListener wird auf den Form-Submit registriert
    form.addEventListener('submit', (form) => {
        // Variable für Fehlertexte
        let errorString = '';

        // 1. Check: Der erste Buchstabe im Namen soll ein Großbuchstabe sein
        const firstLetter = username.value[0];
        const firstLetterIsUpperCase = (firstLetter === firstLetter.toUpperCase());
        if (!firstLetterIsUpperCase) {
            errorString += 'Der erste Buchstabe des Namens muss ein Großbuchstabe sein.\n';
        }

        // 2. Check: Im Passwort soll eine Zahl enthalten sein
        const usernameIncludesDigit = /\d/.test(password.value);
        if (!usernameIncludesDigit) {
            errorString += 'Passwort muss mindestens eine Zahl enthalten..\n';
        }

        // 3. Check Beide Passwörter sollen übereinstimmen
        if (password.value !== passwordConfirm.value) {
            errorString += 'Die beiden Passwörter stimmen nicht überein.\n';
        }

        // Prüfen, ob die Variable errorString etwas enthält.
        // Falls ja: Das Folgende ausführen
        // Falls nein: Formular wird abgesendet
        if (errorString !== "") {
            // Zuweisung des Variableninhalts an DOM-Element errorDiv
            errorDiv.innerText = errorString;
            // Ändern der Textfarbe zu ROT im DOM-Element errorDiv
            errorDiv.style.color = 'red';
            // Absenden des Formulars verhindern
            form.preventDefault();
        } else {
            alert('Formular erfolgreich übermittelt!');
        }
    })

</script>

<style>
    #form-errors {
        margin-top: 10px;
    }
</style>

</html>