From 331f725959c9a9e406c56ceb0fa6222d08b97c38 Mon Sep 17 00:00:00 2001
From: MaxJa4 <74194322+MaxJa4@users.noreply.github.com>
Date: Wed, 17 Jan 2024 21:08:18 +0100
Subject: [PATCH] Add input validation and error handling for clan+player
 modals.

---
 static/index.js                     |  14 ++-
 templates/modals/add_clan.html      | 149 +++++++++++++++++---------
 templates/modals/add_player.html    | 100 ++++++++++++------
 templates/modals/delete_clan.html   |  12 +--
 templates/modals/delete_player.html |   8 +-
 templates/modals/edit_clan.html     | 158 +++++++++++++++++++---------
 templates/modals/edit_player.html   | 103 +++++++++++-------
 7 files changed, 361 insertions(+), 183 deletions(-)

diff --git a/static/index.js b/static/index.js
index d394c47..1d4041b 100644
--- a/static/index.js
+++ b/static/index.js
@@ -12,9 +12,14 @@ function setupClanButtons(dropdownId, delBtnId, editBtnId) {
 
     dropdown.addEventListener('change', function () {
         deleteButton.disabled = !this.value;
-        deleteButton.classList.toggle("bg-secondary-subtle");
         editButton.disabled = !this.value;
-        editButton.classList.toggle("bg-secondary-subtle");
+        if (this.value) {
+            deleteButton.classList.remove("bg-secondary-subtle");
+            editButton.classList.remove("bg-secondary-subtle");
+        } else {
+            deleteButton.classList.add("bg-secondary-subtle");
+            editButton.classList.add("bg-secondary-subtle");
+        }
     });
 }
 
@@ -30,7 +35,10 @@ function setupPlayerButtons(dropdownId, listId, addBtnId) {
 
     dropdown.addEventListener('change', function () {
         addButton.disabled = !this.value && (dropdown.selectedIndex !== -1);
-        addButton.classList.toggle("bg-secondary-subtle");
+        if (this.value)
+            addButton.classList.remove("bg-secondary-subtle");
+        else
+            addButton.classList.add("bg-secondary-subtle");
     });
 }
 
diff --git a/templates/modals/add_clan.html b/templates/modals/add_clan.html
index db26367..4eb1b1c 100644
--- a/templates/modals/add_clan.html
+++ b/templates/modals/add_clan.html
@@ -1,5 +1,6 @@
 {{ define "add_clan" }}
 
+
 <div class="modal fade" id="addClanModal" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
@@ -9,17 +10,18 @@
             </div>
             <div class="modal-body">
                 <div class="form-floating mb-3">
-                    <input type="text" class="form-control form-control-lg" id="clanName" placeholder="Clan-Name">
+                    <input type="text" class="form-control form-control-lg" id="clanName" placeholder="Clan-Name" minlength="2" maxlength="30" required>
                     <label for="clanName">Clan-Name</label>
                 </div>
                 <div class="form-floating">
-                    <input type="text" class="form-control form-control-lg" id="clanTag" placeholder="Clan-Tag">
+                    <input type="text" class="form-control form-control-lg" id="clanTag" placeholder="Clan-Tag" minlength="2" maxlength="30" required>
                     <label for="clanTag">Clan-Tag</label>
                 </div>
                 <div class="form-check form-check-inline mt-3 fs-5">
                     <input class="form-check-input" type="checkbox" id="keepUpdated" value="keepUpdated">
                     <label class="form-check-label" for="keepUpdated">Immer aktuell halten</label>
                 </div>
+                <div class="error-message text-danger fs-5 badge" style="display: none;"></div>
             </div>
             <div class="modal-footer">
                 <button type="submit" name="submit" class="btn btn-lg btn-primary">Hinzufügen</button>
@@ -33,60 +35,111 @@
     document.addEventListener('DOMContentLoaded', function() {
         const addClanModal = document.getElementById('addClanModal');
         const addClanModalBS = new bootstrap.Modal('#addClanModal');
-        if (addClanModal) {
-            addClanModal.addEventListener('shown.bs.modal', event => {
-                const submitButton = addClanModal.querySelector('button[name="submit"]');
-                submitButton.addEventListener('click', function () {
-                    const [clanList, otherClanList] = getClanLists(event);
+        const submitButton = addClanModal.querySelector('button[name="submit"]');
+        let submitClanHandler = null;
 
-                    const clanName = addClanModal.querySelector('#clanName');
-                    const clanTag = addClanModal.querySelector('#clanTag');
-                    const keepUpdated = addClanModal.querySelector('#keepUpdated');
+        const clanName = addClanModal.querySelector('#clanName');
+        const clanTag = addClanModal.querySelector('#clanTag');
+        const keepUpdated = addClanModal.querySelector('#keepUpdated');
+        const errorDiv = addClanModal.querySelector('.error-message');
 
-                    fetch("/clan", {
-                        method: "POST",
-                        body: JSON.stringify({
-                            name: clanName.value,
-                            tag: clanTag.value,
-                            keep_updated: keepUpdated.checked
-                        }),
-                        headers: {
-                            "Content-type": "application/json; charset=UTF-8"
+        function validateInputs() {
+            if (clanName.value.length < 2 || clanName.value.length > 30) {
+                clanName.classList.add('is-invalid');
+                return false;
+            } else {
+                clanName.classList.remove('is-invalid');
+            }
+
+            if (clanTag.value.length < 2 || clanTag.value.length > 30) {
+                clanTag.classList.add('is-invalid');
+                return false;
+            } else {
+                clanTag.classList.remove('is-invalid');
+            }
+
+            return true;
+        }
+
+        function updateClanLists(clanList, otherClanList) {
+            fetch('/clans_html')
+                .then(response => {
+                    if (!response.ok) {
+                        console.error('Response was not ok');
+                    }
+                    return response.text();
+                })
+                .then(data => {
+                    const lastIndex = otherClanList.selectedIndex;
+
+                    clanList.innerHTML = data;
+                    otherClanList.innerHTML = data;
+
+                    clanList.selectedIndex = clanList.children.length - 1;
+                    otherClanList.selectedIndex = lastIndex;
+
+                    clanList.dispatchEvent(new Event('change'));
+                })
+                .catch((error) => {
+                    alert('Fehler beim Aktualisieren der Clan-List: ' + error.message);
+                });
+        }
+
+        function createSubmitClanHandler(modalEvent) {
+            return function submitClanHandler(e) {
+                const [clanList, otherClanList] = getClanLists(modalEvent);
+
+                if (!validateInputs()) {
+                    return;
+                }
+
+                fetch("/clan", {
+                    method: "POST",
+                    body: JSON.stringify({
+                        name: clanName.value,
+                        tag: clanTag.value,
+                        keep_updated: keepUpdated.checked
+                    }),
+                    headers: {
+                        "Content-type": "application/json; charset=UTF-8"
+                    }
+                })
+                    .then(response => {
+                        if (!response.ok) {
+                            if (response.status === 400) {
+                                throw new Error('Clan oder Tag existiert bereits!');
+                            }
+                            throw new Error('Server error');
                         }
                     })
-                        .then(() => {
-                            const lastIndex = otherClanList.selectedIndex;
+                    .then(() => {
+                        updateClanLists(clanList, otherClanList);
 
-                            fetch('/clans_html')
-                                .then(response => {
-                                    if (!response.ok) {
-                                        throw new Error('Network response was not ok');
-                                    }
-                                    return response.text();
-                                })
-                                .then(data => {
-                                    clanList.innerHTML = data;
-                                    otherClanList.innerHTML = data;
+                        addClanModalBS.hide();
+                    })
+                    .catch((error) => {
+                        errorDiv.innerText = error.message;
+                        errorDiv.style.display = 'block';
+                    });
+            }
+        }
 
-                                    clanList.selectedIndex = clanList.children.length - 1;
-                                    otherClanList.selectedIndex = lastIndex;
+        if (addClanModal) {
+            addClanModal.addEventListener('shown.bs.modal', event => {
+                submitClanHandler = createSubmitClanHandler(event);
+                submitButton.addEventListener('click', submitClanHandler);
+            });
 
-                                    clanList.dispatchEvent(new Event('change'));
-                                })
-                                .catch(error => {
-                                    console.error('There has been a problem with your fetch operation:', error);
-                                });
+            addClanModal.addEventListener('hidden.bs.modal', event => {
+                submitButton.removeEventListener('click', submitClanHandler);
 
-
-                            addClanModalBS.hide();
-                            clanName.value = "";
-                            clanTag.value = "";
-                            keepUpdated.checked = false;
-                            })
-                        .catch((error) => {
-                            throw new Error(error)
-                        });
-                }, { once: true });
+                clanName.value = "";
+                clanTag.value = "";
+                errorDiv.innerText = "";
+                errorDiv.style.display = 'none';
+                keepUpdated.checked = false;
+                clanName.classList.remove('is-invalid');
+                clanTag.classList.remove('is-invalid');
             });
         }
     });
diff --git a/templates/modals/add_player.html b/templates/modals/add_player.html
index 56df7c4..a20e9ce 100644
--- a/templates/modals/add_player.html
+++ b/templates/modals/add_player.html
@@ -13,9 +13,10 @@
                     <label for="playerClanName">Clan-Name</label>
                 </div>
                 <div class="form-floating">
-                    <input type="text" class="form-control form-control-lg" id="playerName" placeholder="Spieler-Name">
+                    <input type="text" class="form-control form-control-lg" id="playerName" placeholder="Spieler-Name" required>
                     <label for="playerName">Spieler-Name</label>
                 </div>
+                <div class="error-message text-danger fs-5 badge" style="display: none;"></div>
             </div>
             <div class="modal-footer">
                 <button type="submit" name="submit" class="btn btn-lg btn-primary">Hinzufügen</button>
@@ -29,43 +30,76 @@
     document.addEventListener('DOMContentLoaded', function() {
         const addPlayerModal = document.getElementById('addPlayerModal');
         const addPlayerModalBS = new bootstrap.Modal('#addPlayerModal');
+        let submitPlayerHandler = null;
+        let playerList = null;
+        let selectedClan = null;
+
+        const submitButton = addPlayerModal.querySelector('button[name="submit"]');
+        const playerName = addPlayerModal.querySelector('#playerName');
+        const clanName = addPlayerModal.querySelector('#playerClanName');
+        const errorDiv = editPlayerModal.querySelector('.error-message');
+        const homeClanListIndex = document.getElementById('home-clan').selectedIndex;
+        const oppClanListIndex = document.getElementById('opponent-clan').selectedIndex;
+
+        function validateInput() {
+            if (playerName.value.length < 1) {
+                playerName.classList.add('is-invalid');
+                return false;
+            }
+            playerName.classList.remove('is-invalid');
+            return true;
+        }
+
+        function createSubmitPlayerHandler(modalEvent) {
+            return function submitPlayerHandler(e) {
+                if (!validateInput())
+                    return;
+
+                const clanId = parseInt(selectedClan.value);
+
+                fetch("/player", {
+                    method: "POST",
+                    body: JSON.stringify({
+                        name: playerName.value,
+                        clan_id: clanId
+                    }),
+                    headers: {
+                        "Content-type": "application/json; charset=UTF-8"
+                    }
+                })
+                    .then(() => {
+                        const sameClan = homeClanListIndex === oppClanListIndex;
+                        if (playerList.id === 'home-player-list' || sameClan)
+                            htmx.ajax('GET', '/players_html', {target: '#home-player-list', values: {"clan_id": getSelectedClanId("home-clan")}});
+                        if (playerList.id === 'opponent-player-list' || sameClan)
+                            htmx.ajax('GET', '/players_html', {target: '#opponent-player-list', values: {"clan_id": getSelectedClanId("opponent-clan")}});
+
+                        addPlayerModalBS.hide();
+                    }).catch((error) => {
+                        errorDiv.innerText = error.message;
+                        errorDiv.style.display = 'block';
+                    });
+            }
+        }
+
         if (addPlayerModal) {
             addPlayerModal.addEventListener('show.bs.modal', event => {
-                const [playerList, otherPlayerList] = getPlayerLists(event);
-                const selectedClan = getSelectedClan(event);
-                const playerName = addPlayerModal.querySelector('#playerName');
-                const clanName = addPlayerModal.querySelector('#playerClanName');
+                submitPlayerHandler = createSubmitPlayerHandler(event);
+                submitButton.addEventListener('click', submitPlayerHandler);
+
+                [playerList, _] = getPlayerLists(event);
+                selectedClan = getSelectedClan(event);
                 clanName.value = selectedClan.innerText;
-                const clanId = parseInt(selectedClan.value);
-                const homeClanListIndex = document.getElementById('home-clan').selectedIndex;
-                const oppClanListIndex = document.getElementById('opponent-clan').selectedIndex;
+            });
 
-                const submitButton = addPlayerModal.querySelector('button[name="submit"]');
-                submitButton.addEventListener('click', function () {
-                    fetch("/player", {
-                        method: "POST",
-                        body: JSON.stringify({
-                            name: playerName.value,
-                            clan_id: clanId
-                        }),
-                        headers: {
-                            "Content-type": "application/json; charset=UTF-8"
-                        }
-                    })
-                        .then(() => {
-                            const sameClan = homeClanListIndex === oppClanListIndex;
-                            if (playerList.id === 'home-player-list' || sameClan)
-                                htmx.ajax('GET', '/players_html', {target: '#home-player-list', values: {"clan_id": getSelectedClanId("home-clan")}});
-                            if (playerList.id === 'opponent-player-list' || sameClan)
-                                htmx.ajax('GET', '/players_html', {target: '#opponent-player-list', values: {"clan_id": getSelectedClanId("opponent-clan")}});
+            addPlayerModal.addEventListener('hidden.bs.modal', event => {
+                submitButton.removeEventListener('click', submitPlayerHandler);
 
-                            addPlayerModalBS.hide();
-                            playerName.value = "";
-                            clanName.value = "";
-                        }).catch((error) => {
-                            throw new Error(error)
-                        });
-                }, { once: true });
+                playerName.value = "";
+                clanName.value = "";
+                errorDiv.innerText = "";
+                errorDiv.style.display = 'none';
+                playerName.classList.remove('is-invalid');
             });
         }
     });
diff --git a/templates/modals/delete_clan.html b/templates/modals/delete_clan.html
index 14820ef..db4d39c 100644
--- a/templates/modals/delete_clan.html
+++ b/templates/modals/delete_clan.html
@@ -1,6 +1,6 @@
 {{ define "delete_clan" }}
 
-<div class="modal modal-lg fade" id="deleteClanModal" tabindex="-1">
+<div class="modal fade" id="deleteClanModal" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">
@@ -8,9 +8,9 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
             <div class="modal-body fs-5">
-                Möchtest du den Clan "<span id="clan"></span>" wirklich löschen?
+                Möchtest du den Clan <span class="text-warning fw-bold" id="clan"></span> wirklich löschen?
                 <br><br>
-                Diese Aktion kann nicht rückgängig gemacht werden.
+                Die Aktion kann nicht rückgängig gemacht werden.
             </div>
             <div class="modal-footer">
                 <button type="submit" name="submit" class="btn btn-lg btn-danger">Löschen</button>
@@ -46,7 +46,7 @@
                             fetch('/clans_html')
                                 .then(response => {
                                     if (!response.ok) {
-                                        throw new Error('Network response was not ok');
+                                        throw new Error('Server error');
                                     }
                                     return response.text();
                                 })
@@ -58,13 +58,13 @@
                                     otherClanList.dispatchEvent(new Event('change'));
                                 })
                                 .catch(error => {
-                                    console.error('There has been a problem with your fetch operation:', error);
+                                    alert('Beim Laden der Clanliste ist ein Fehler aufgetreten: ' + error.message);
                                 });
 
                             deleteClanModalBS.hide();
                         })
                         .catch((error) => {
-                            throw new Error(error)
+                            alert('Beim Löschen des Clans ist ein Fehler aufgetreten: ' + error.message);
                         });
                 }, { once: true });
             });
diff --git a/templates/modals/delete_player.html b/templates/modals/delete_player.html
index c24c963..a3fe526 100644
--- a/templates/modals/delete_player.html
+++ b/templates/modals/delete_player.html
@@ -1,6 +1,6 @@
 {{ define "delete_player" }}
 
-<div class="modal modal-lg fade" id="deletePlayerModal" tabindex="-1">
+<div class="modal fade" id="deletePlayerModal" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">
@@ -8,9 +8,9 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
             <div class="modal-body fs-5">
-                Möchtest du den Spieler "<span id="player"></span>" wirklich löschen?
+                Möchtest du den Spieler <span class="text-warning fw-bold" id="player"></span> wirklich löschen?
                 <br><br>
-                Diese Aktion kann nicht rückgängig gemacht werden.
+                Die Aktion kann nicht rückgängig gemacht werden.
             </div>
             <div class="modal-footer">
                 <button type="submit" name="submit" class="btn btn-lg btn-danger">Löschen</button>
@@ -55,7 +55,7 @@
                             deletePlayerModalBS.hide();
                         })
                         .catch((error) => {
-                            throw new Error(error)
+                            alert('Fehler beim Löschen des Spielers: ' + error.message);
                         });
                 }, { once: true });
             });
diff --git a/templates/modals/edit_clan.html b/templates/modals/edit_clan.html
index 993a204..ab1b819 100644
--- a/templates/modals/edit_clan.html
+++ b/templates/modals/edit_clan.html
@@ -9,18 +9,18 @@
             </div>
             <div class="modal-body">
                 <div class="form-floating mb-3">
-                    <input type="text" class="form-control form-control-lg" id="editClanName" placeholder="Clan-Name">
+                    <input type="text" class="form-control form-control-lg" id="editClanName" placeholder="Clan-Name" minlength="2" maxlength="30" required>
                     <label for="editClanName">Clan-Name</label>
                 </div>
                 <div class="form-floating">
-                    <input type="text" class="form-control form-control-lg" id="editClanTag" placeholder="Clan-Tag">
+                    <input type="text" class="form-control form-control-lg" id="editClanTag" placeholder="Clan-Tag" minlength="2" maxlength="30" required>
                     <label for="editClanTag">Clan-Tag</label>
                 </div>
                 <div class="form-check form-check-inline mt-3 fs-5">
                     <input class="form-check-input" type="checkbox" id="editKeepUpdated" value="keepUpdated">
                     <label class="form-check-label" for="editKeepUpdated">Immer aktuell halten</label>
                 </div>
-                <input type="hidden" id="editClanId" value="">
+                <div class="error-message text-danger fs-5 badge" style="display: none;"></div>
             </div>
             <div class="modal-footer">
                 <button type="submit" name="submit" class="btn btn-lg btn-primary">Speichern</button>
@@ -34,15 +34,101 @@
     document.addEventListener('DOMContentLoaded', function() {
         const editClanModal = document.getElementById('editClanModal');
         const editClanModalBS = new bootstrap.Modal('#editClanModal');
+        const submitButton = editClanModal.querySelector('button[name="submit"]');
+        let submitClanHandler = null;
+        let clanList = null;
+        let otherClanList = null;
+        let clanId = null;
+
+        const clanName = editClanModal.querySelector('#editClanName');
+        const clanTag = editClanModal.querySelector('#editClanTag');
+        const keepUpdated = editClanModal.querySelector('#editKeepUpdated');
+        const errorDiv = editClanModal.querySelector('.error-message');
+
+        function validateInputs() {
+            if (clanName.value.length < 2 || clanName.value.length > 30) {
+                clanName.classList.add('is-invalid');
+                return false;
+            } else {
+                clanName.classList.remove('is-invalid');
+            }
+
+            if (clanTag.value.length < 2 || clanTag.value.length > 30) {
+                clanTag.classList.add('is-invalid');
+                return false;
+            } else {
+                clanTag.classList.remove('is-invalid');
+            }
+
+            return true;
+        }
+
+        function updateClanLists(clanList, otherClanList) {
+            fetch('/clans_html')
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return response.text();
+                })
+                .then(data => {
+                    const lastIndex = clanList.selectedIndex;
+                    const otherLastIndex = otherClanList.selectedIndex;
+
+                    clanList.innerHTML = data;
+                    otherClanList.innerHTML = data;
+
+                    clanList.selectedIndex = lastIndex;
+                    otherClanList.selectedIndex = otherLastIndex;
+                })
+                .catch(error => {
+                    alert('Fehler beim Aktualisieren der Clan-Liste: ' + error.message);
+                });
+        }
+
+        function createSubmitClanHandler() {
+            return function submitClanHandler(e) {
+                if (!validateInputs())
+                    return;
+
+                fetch("/clan/" + clanId, {
+                    method: "PATCH",
+                    body: JSON.stringify({
+                        name: clanName.value,
+                        tag: clanTag.value,
+                        keep_updated: keepUpdated.checked
+                    }),
+                    headers: {
+                        "Content-type": "application/json; charset=UTF-8"
+                    }
+                })
+                    .then(response => {
+                        if (!response.ok) {
+                            if (response.status === 400) {
+                                throw new Error('Clan oder Tag existiert bereits!');
+                            }
+                            throw new Error('Server error');
+                        }
+                    })
+                    .then(() => {
+                        updateClanLists(clanList, otherClanList);
+
+                        editClanModalBS.hide();
+                    })
+                    .catch((error) => {
+                        errorDiv.innerText = error.message;
+                        errorDiv.style.display = 'block';
+                    });
+            }
+        }
+
         if (editClanModal) {
             editClanModal.addEventListener('show.bs.modal', event => {
-                const [clanList, otherClanList] = getClanLists(event);
+                submitClanHandler = createSubmitClanHandler();
+                submitButton.addEventListener('click', submitClanHandler);
 
-                const clanName = editClanModal.querySelector('#editClanName');
-                const clanTag = editClanModal.querySelector('#editClanTag');
-                const keepUpdated = editClanModal.querySelector('#editKeepUpdated');
-                const clanId = parseInt(clanList.value);
-                const submitButton = editClanModal.querySelector('button[name="submit"]');
+                [clanList, otherClanList] = getClanLists(event);
+                clanId = parseInt(clanList.value);
 
                 fetch("/clan/" + clanId, {
                     method: "GET",
@@ -59,52 +145,20 @@
                         clanTag.value = result['tag'];
                     })
                     .catch((error) => {
-                        throw new Error(error);
+                        alert('Fehler beim Laden des Clans: ' + error.message);
                     });
+            });
 
-                submitButton.addEventListener('click', function () {
-                    fetch("/clan/" + clanId, {
-                        method: "PATCH",
-                        body: JSON.stringify({
-                            name: clanName.value,
-                            tag: clanTag.value,
-                            keep_updated: keepUpdated.checked
-                        }),
-                        headers: {
-                            "Content-type": "application/json; charset=UTF-8"
-                        }
-                    })
-                        .then(() => {
-                            const lastIndex = clanList.selectedIndex;
-                            const otherLastIndex = otherClanList.selectedIndex;
+            editClanModal.addEventListener('hidden.bs.modal', event => {
+                submitButton.removeEventListener('click', submitClanHandler);
 
-                            fetch('/clans_html')
-                                .then(response => {
-                                    if (!response.ok) {
-                                        throw new Error('Network response was not ok');
-                                    }
-                                    return response.text();
-                                })
-                                .then(data => {
-                                    clanList.innerHTML = data;
-                                    otherClanList.innerHTML = data;
-
-                                    clanList.selectedIndex = lastIndex;
-                                    otherClanList.selectedIndex = otherLastIndex;
-                                })
-                                .catch(error => {
-                                    console.error('There has been a problem with your fetch operation:', error);
-                                });
-
-                            editClanModalBS.hide();
-                            clanName.value = "";
-                            clanTag.value = "";
-                            keepUpdated.checked = false;
-                        })
-                        .catch((error) => {
-                            throw new Error(error)
-                        });
-                }, { once: true });
+                clanName.value = "";
+                clanTag.value = "";
+                errorDiv.innerText = "";
+                errorDiv.style.display = 'none';
+                keepUpdated.checked = false;
+                clanName.classList.remove('is-invalid');
+                clanTag.classList.remove('is-invalid');
             });
         }
     });
diff --git a/templates/modals/edit_player.html b/templates/modals/edit_player.html
index a408862..3cc5509 100644
--- a/templates/modals/edit_player.html
+++ b/templates/modals/edit_player.html
@@ -12,7 +12,7 @@
                     <input type="text" class="form-control form-control-lg" id="editPlayerName" placeholder="Spieler-Name">
                     <label for="editPlayerName">Spieler-Name</label>
                 </div>
-                <input type="hidden" id="editPlayerId" value="">
+                <div class="error-message text-danger fs-5 badge" style="display: none;"></div>
             </div>
             <div class="modal-footer">
                 <button type="submit" name="submit" class="btn btn-lg btn-primary">Speichern</button>
@@ -26,47 +26,76 @@
     document.addEventListener('DOMContentLoaded', function() {
         const editPlayerModal = document.getElementById('editPlayerModal');
         const editPlayerModalBS = new bootstrap.Modal('#editPlayerModal');
+        let submitPlayerHandler = null;
+        let playerList = null;
+        let otherPlayerList = null;
+        let selectedClan = null;
+
+        const submitButton = editPlayerModal.querySelector('button[name="submit"]');
+        const playerName = editPlayerModal.querySelector('#editPlayerName');
+        const errorDiv = editPlayerModal.querySelector('.error-message');
+        const homeClanListIndex = document.getElementById('home-clan').selectedIndex;
+        const oppClanListIndex = document.getElementById('opponent-clan').selectedIndex;
+
+        function validateInput() {
+            if (playerName.value.length < 1) {
+                playerName.classList.add('is-invalid');
+                return false;
+            }
+            playerName.classList.remove('is-invalid');
+            return true;
+        }
+
+        function createSubmitPlayerHandler(modalEvent) {
+            return function submitPlayerHandler(e) {
+                if (!validateInput())
+                    return;
+
+                const playerId = parseInt(modalEvent.relatedTarget.getAttribute('data-bs-id'));
+                const clanId = parseInt(selectedClan.value);
+
+                fetch("/player/" + playerId, {
+                    method: "PATCH",
+                    body: JSON.stringify({
+                        name: playerName.value,
+                        clan_id: clanId
+                    }),
+                    headers: {
+                        "Content-type": "application/json; charset=UTF-8"
+                    }
+                })
+                    .then(() => {
+                        const sameClan = homeClanListIndex === oppClanListIndex;
+                        if (playerList.id === 'home-player-list' || sameClan)
+                            htmx.ajax('GET', '/players_html', {target: '#home-player-list', values: {"clan_id": getSelectedClanId("home-clan")}});
+                        if (playerList.id === 'opponent-player-list' || sameClan)
+                            htmx.ajax('GET', '/players_html', {target: '#opponent-player-list', values: {"clan_id": getSelectedClanId("opponent-clan")}});
+
+                        editPlayerModalBS.hide();
+                    }).catch((error) => {
+                        errorDiv.innerText = error.message;
+                        errorDiv.style.display = 'block';
+                    });
+            }
+        }
+
         if (editPlayerModal) {
             editPlayerModal.addEventListener('show.bs.modal', event => {
-                const [playerList, otherPlayerList] = getPlayerLists(event);
-                const selectedClan = getSelectedClan(event);
-                const playerName = editPlayerModal.querySelector('#editPlayerName');
-                const clanId = parseInt(selectedClan.value);
-                const homeClanListIndex = document.getElementById('home-clan').selectedIndex;
-                const oppClanListIndex = document.getElementById('opponent-clan').selectedIndex;
+                submitPlayerHandler = createSubmitPlayerHandler(event);
+                submitButton.addEventListener('click', submitPlayerHandler);
 
-                const button = event.relatedTarget;
-                const playerId = parseInt(button.getAttribute('data-bs-id'));
-                playerName.value = button.closest('.input-group').querySelector('span').innerText;
+                [playerList, otherPlayerList] = getPlayerLists(event);
+                selectedClan = getSelectedClan(event);
+                playerName.value = event.relatedTarget.closest('.input-group').querySelector('span').innerText;
+            });
 
-                const submitButton = editPlayerModal.querySelector('button[name="submit"]');
-                submitButton.addEventListener('click', function (e) {
-                    e.preventDefault();
-                    submitButton.onclick = function () {}
+            editPlayerModal.addEventListener('hide.bs.modal', event => {
+                submitButton.removeEventListener('click', submitPlayerHandler);
 
-                    fetch("/player/" + playerId, {
-                        method: "PATCH",
-                        body: JSON.stringify({
-                            name: playerName.value,
-                            clan_id: clanId
-                        }),
-                        headers: {
-                            "Content-type": "application/json; charset=UTF-8"
-                        }
-                    })
-                        .then(() => {
-                            const sameClan = homeClanListIndex === oppClanListIndex;
-                            if (playerList.id === 'home-player-list' || sameClan)
-                                htmx.ajax('GET', '/players_html', {target: '#home-player-list', values: {"clan_id": getSelectedClanId("home-clan")}});
-                            if (playerList.id === 'opponent-player-list' || sameClan)
-                                htmx.ajax('GET', '/players_html', {target: '#opponent-player-list', values: {"clan_id": getSelectedClanId("opponent-clan")}});
-
-                            editPlayerModalBS.hide();
-                            playerName.value = "";
-                        }).catch((error) => {
-                            throw new Error(error)
-                        });
-                }, { once: true });
+                playerName.value = "";
+                errorDiv.innerText = "";
+                errorDiv.style.display = 'none';
+                playerName.classList.remove('is-invalid');
             });
         }
     });