mandanten Layout Prüflogik

app/flask-postgres/app/templates/admin_mandanten.html

@@ -13,33 +13,34 @@
       <h2>Neuen Mandanten anlegen</h2>
     </div>
 
-    <form method="post" class="admin-grid-form">
-      <input type="hidden" name="action" value="create">
+    <form method="post" class="admin-grid-form" id="mandant-create-form" novalidate>
+  <input type="hidden" name="action" value="create">
 
-      <div class="form-row">
-        <label for="kuerzel">Kürzel</label>
-        <input type="text" id="kuerzel" name="kuerzel" required>
-      </div>
+  <div class="form-row">
+    <label for="kuerzel">Kürzel</label>
+    <input type="text" id="kuerzel" name="kuerzel" required>
+  </div>
 
-      <div class="form-row">
-        <label for="name">Name</label>
-        <input type="text" id="name" name="name" required>
-      </div>
+  <div class="form-row">
+    <label for="name">Name</label>
+    <input type="text" id="name" name="name" required>
+  </div>
 
-      <div class="form-row">
-        <label for="kontakt_email">Kontakt E-Mail</label>
-        <input type="email" id="kontakt_email" name="kontakt_email">
-      </div>
+  <div class="form-row">
+    <label for="kontakt_email">Kontakt E-Mail</label>
+    <input type="email" id="kontakt_email" name="kontakt_email" required>
+  </div>
 
-      <div class="form-row">
-        <label for="level">Level</label>
-        <input type="number" id="level" name="level" value="0" min="0">
-      </div>
+  <div class="form-row">
+    <label for="level">Level</label>
+    <input type="number" id="level" name="level" value="0" min="0">
+  </div>
 
-      <div class="form-row form-row-full">
-        <button type="submit" class="btn-primary">Mandant anlegen</button>
-      </div>
-    </form>
+  <div class="form-row form-row-full">
+    <div id="mandant-create-error" class="error-box" style="display: none;"></div>
+    <button type="submit" class="btn-primary">Mandant anlegen</button>
+  </div>
+</form>
   </div>
 </section>
 
@@ -110,3 +111,45 @@
 </section>
 
 {% endblock %}
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const form = document.getElementById("mandant-create-form");
+    const errorBox = document.getElementById("mandant-create-error");
+
+    if (!form) return;
+
+    form.addEventListener("submit", function (event) {
+      const kuerzel = document.getElementById("kuerzel").value.trim();
+      const name = document.getElementById("name").value.trim();
+      const email = document.getElementById("kontakt_email").value.trim();
+
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+      let errors = [];
+
+      if (!kuerzel) {
+        errors.push("Kürzel ist ein Pflichtfeld.");
+      }
+
+      if (!name) {
+        errors.push("Name ist ein Pflichtfeld.");
+      }
+
+      if (!email) {
+        errors.push("Kontakt E-Mail ist ein Pflichtfeld.");
+      } else if (!emailRegex.test(email)) {
+        errors.push("Bitte eine gültige E-Mail-Adresse eingeben.");
+      }
+
+      if (errors.length > 0) {
+        event.preventDefault();
+        errorBox.innerHTML = errors.join("<br>");
+        errorBox.style.display = "block";
+      } else {
+        errorBox.innerHTML = "";
+        errorBox.style.display = "none";
+      }
+    });
+  });
+</script>

app/flask-postgres/styles/site.css

@@ -194,6 +194,18 @@ p {
   font-size: 14px;
   border-radius: 10px;
 }
+/* =========================
+   BUTTON INTERACTION
+========================= */
+
+.btn-primary,
+.btn-secondary,
+.btn-danger,
+.btn-small,
+.user-menu-toggle,
+button {
+  cursor: pointer;
+}
 
 /* =========================
    6. FORMS
@@ -237,6 +249,9 @@ p {
   margin-bottom: 16px;
 }
 
+#mandant-create-error {
+  margin-bottom: 14px;
+}
 /* =========================
    8. COMPONENTS
 ========================= */