Merge pull request #1996 from RaspAP/fix/dhcp-required-fields

Fix: Add required validation for DHCP fields when enabled

Author: billz

app/js/ui/main.js

@@ -457,6 +457,36 @@ function setDhcpFieldsDisabled() {
     $('#txtmetric').prop('disabled', true);
 }
 
+document.addEventListener('DOMContentLoaded', function() {
+    const dhcpCheckbox = document.getElementById('dhcp-iface');
+    const rangeStart = document.getElementById('txtrangestart');
+    const rangeEnd = document.getElementById('txtrangeend');
+    const leaseTime = document.getElementById('txtrangeleasetime');
+
+    function updateRequiredFields() {
+        const isChecked = dhcpCheckbox.checked === true;
+
+        if (isChecked) {
+            rangeStart.setAttribute('required', 'required');
+            rangeEnd.setAttribute('required', 'required');
+            leaseTime.setAttribute('required', 'required');
+        } else {
+            rangeStart.removeAttribute('required');
+            rangeEnd.removeAttribute('required');
+            leaseTime.removeAttribute('required');
+
+            rangeStart.classList.remove('is-invalid', 'is-valid');
+            rangeEnd.classList.remove('is-invalid', 'is-valid');
+            leaseTime.classList.remove('is-invalid', 'is-valid');
+        }
+    }
+
+    // set initial state
+    updateRequiredFields();
+    setTimeout(updateRequiredFields, 100);
+    dhcpCheckbox.addEventListener('change', updateRequiredFields);
+});
+
 // Static Array method
 Array.range = (start, end) => Array.from({length: (end - start)}, (v, k) => k + start);
 

templates/dhcp/general.php

@@ -107,34 +107,32 @@
 
   <div class="row">
     <div class="mb-3 col-md-6">
-      <label for="code"><?php echo _("Starting IP Address"); ?></label>
+      <label for="txtrangestart"><?php echo _("Starting IP Address"); ?></label>
       <input type="text" class="form-control ip_address" id="txtrangestart" name="RangeStart" maxlength="15" />
       <div class="invalid-feedback">
         <?php echo _("Please provide a valid Starting IP Address."); ?>
       </div>
     </div>
   </div>
-
   <div class="row">
     <div class="mb-3 col-md-6">
-      <label for="code"><?php echo _("Ending IP Address"); ?></label>
+      <label for="txtrangeend"><?php echo _("Ending IP Address"); ?></label>
       <input type="text" class="form-control ip_address" id="txtrangeend" name="RangeEnd" maxlength="15" />
       <div class="invalid-feedback">
         <?php echo _("Please provide a valid Ending IP Address."); ?>
       </div>
     </div>
   </div>
-
   <div class="row">
     <div class="mb-3 col-xs-3 col-sm-3">
-      <label for="code"><?php echo _("Lease Time"); ?></label>
+      <label for="txtrangeleasetime"><?php echo _("Lease Time"); ?></label>
       <input type="text" class="form-control" id="txtrangeleasetime" name="RangeLeaseTime" />
       <div class="invalid-feedback">
         <?php echo _("Please provide a valid Lease Time."); ?>
       </div>
     </div>
     <div class="col-xs-3 col-sm-3">
-      <label for="code"><?php echo _("Interval"); ?></label>
+      <label for="cbxrangeleasetimeunits"><?php echo _("Interval"); ?></label>
       <select id="cbxrangeleasetimeunits" name="RangeLeaseTimeUnits" class="form-select" >
         <option value="m"><?php echo _("Minute(s)"); ?></option>
         <option value="h"><?php echo _("Hour(s)"); ?></option>