srv/poe_manager/templates/devices.html

@@ -67,7 +67,7 @@
 <div class="modal fade" id="deviceModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
-      <form method="post">
+      <form method="post" onsubmit="return validateIPField(this);">
         <div class="modal-header">
           <h5 class="modal-title black">Neues Gerät hinzufügen</h5>
           <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
@@ -81,6 +81,7 @@
             <div class="mb-3">
                 <label>IP-Adresse</label>
                 <input type="text" name="rpi_ip" class="form-control" required>
+                <div class="invalid-feedback">Bitte eine gültige IP-Adresse eingeben (z. B. 192.168.1.100).</div>
             </div>
             <div class="mb-3">
                 <label>MAC-Adresse</label>
@@ -112,7 +113,7 @@
 <div class="modal fade" id="editDeviceModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
-      <form method="post">
+      <form method="post" onsubmit="return validateIPField(this);">
         <input type="hidden" name="edit_device" value="1">
         <input type="hidden" name="old_mac" id="edit_old_mac">
         <div class="modal-header">
@@ -127,6 +128,7 @@
             <div class="mb-3">
                 <label>IP-Adresse</label>
                 <input type="text" name="rpi_ip" id="edit_ip" class="form-control" required>
+                <div class="invalid-feedback">Bitte eine gültige IP-Adresse eingeben (z. B. 192.168.1.100).</div>
             </div>
             <div class="mb-3">
                 <label>MAC-Adresse</label>
@@ -190,6 +192,36 @@ function openSwitchModal(mac, switch_hostname) {
     document.getElementById("switch_mac").value = mac;
     document.getElementById("switch_select").value = switch_hostname;
 }
+
+// -------------------
+// IP-Validierung
+// -------------------
+const ipPattern = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$/;
+
+function validateIP(input) {
+    if (!ipPattern.test(input.value)) {
+        input.classList.add("is-invalid");
+        return false;
+    } else {
+        input.classList.remove("is-invalid");
+        return true;
+    }
+}
+
+function validateIPField(form) {
+    const ipInput = form.querySelector("input[name='rpi_ip']");
+    if (ipInput) {
+        return validateIP(ipInput);
+    }
+    return true;
+}
+
+// Live-Feedback beim Tippen
+document.addEventListener("input", function(e) {
+    if (e.target.name === "rpi_ip") {
+        validateIP(e.target);
+    }
+});
 </script>
 
 {% endblock %}