wip

app/static/js/validation.js

@@ -53,6 +53,13 @@ function validateAppName() {
 // Port Validation
 function validatePort(portField, protocolField) {
   const serverField = document.getElementById('server-id');
+  // Create feedback element if it doesn't exist
+  if (!portField.nextElementSibling || !portField.nextElementSibling.classList.contains('feedback')) {
+    const feedback = document.createElement('div');
+    feedback.className = 'feedback';
+    portField.parentNode.insertBefore(feedback, portField.nextSibling);
+  }
+
   const feedbackElement = portField.nextElementSibling;
   const submitButton = document.querySelector('button[type="submit"]');
 
@@ -65,6 +72,26 @@ function validatePort(portField, protocolField) {
 
   if (!port || !serverId) {
     clearFeedback(feedbackElement);
+    portField.classList.remove('is-invalid');
+    return;
+  }
+
+  // Check for duplicate ports within the form first
+  const allPortFields = document.querySelectorAll('input[name="port_numbers[]"]');
+  const allProtocolFields = document.querySelectorAll('select[name="protocols[]"]');
+  let duplicateFound = false;
+
+  allPortFields.forEach((field, index) => {
+    if (field !== portField &&
+      field.value === port &&
+      allProtocolFields[index].value === protocol) {
+      duplicateFound = true;
+    }
+  });
+
+  if (duplicateFound) {
+    portField.classList.add('is-invalid');
+    showError(feedbackElement, `Duplicate port ${port}/${protocol} in your form`);
     return;
   }
 
@@ -75,22 +102,22 @@ function validatePort(portField, protocolField) {
       .then(response => response.json())
       .then(data => {
         if (!data.valid) {
+          portField.classList.add('is-invalid');
           showError(feedbackElement, data.message);
           if (data.edit_url) {
-            feedbackElement.innerHTML += ` <a href="${data.edit_url}" class="alert-link">Edit the conflicting app?</a>`;
+            feedbackElement.innerHTML += ` <a href="${data.edit_url}" class="alert-link">Edit conflicting app</a>`;
           }
-          portField.classList.add('is-invalid');
-          submitButton.disabled = true;
         } else {
-          clearFeedback(feedbackElement);
           portField.classList.remove('is-invalid');
           portField.classList.add('is-valid');
-          submitButton.disabled = false;
+          showSuccess(feedbackElement, "Port available");
         }
       })
       .catch(error => {
         console.error('Validation error:', error);
         clearFeedback(feedbackElement);
+        portField.classList.remove('is-invalid');
+        portField.classList.remove('is-valid');
       });
   }, 300);
 }