Add form validation

dist/index.html

@@ -24,23 +24,23 @@
         </a>
     </div>
     <h1>Visual Subnet Calculator <span style="font-size:1rem;">(UNDER CONSTRUCTION)</span></h1>
-    <div class="alert alert-primary alert-dismissible show mt-3" role="alert">
+    <div class="alert alert-primary  alert-dismissible show mt-3" role="alert">
         Enter the network you wish to subnet and use the Split/Join buttons on the right to start designing!
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
     </div>
 
-    <div class="row font-monospace g-2 mb-3">
+    <form id="input_form" class="row font-monospace g-2 mb-3" novalidate>
         <div class="col-lg-2 col-md-3 col-4">
-            <div><label for="basic-url" class="form-label mb-0 ms-1">Network Address</label></div>
+            <div><label for="network" class="form-label mb-0 ms-1">Network Address</label></div>
-            <div><input id="network" type="text" class="form-control" value="10.0.0.0" aria-label="Network Address"></div>
+            <div><input id="network" type="text" class="form-control" value="10.0.0.0" aria-label="Network Address" pattern="^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)" required></div>
         </div>
         <div class="col-auto">
             <div style="height:2rem"></div>
             <div>/</div>
         </div>
         <div class="col-lg-2 col-md-3 col-4">
-            <div><label for="basic-url" class="form-label mb-0 ms-1">Network Size</label></div>
+            <div><label for="netsize" class="form-label mb-0 ms-1">Network Size</label></div>
-            <div><input id="netsize" type="text" class="form-control w-10" value="16" aria-label="Network Size"></div>
+            <div><input id="netsize" type="text" class="form-control w-10" value="16" aria-label="Network Size" pattern="^(\d|[12]\d|3[0-2])$" required></div>
         </div>
         <div class="col-lg-2 col-md-3 col-3">
             <div style="height:1.5rem"></div>
@@ -49,7 +49,7 @@
                 <button id="btn_reset" class="btn btn-danger mb-0 mt-auto" type="button">Reset</button>
             </div>
         </div>
-    </div>
+    </form>
 
 
     <table id="calc" class="table table-bordered font-monospace">
@@ -81,6 +81,22 @@
             </tr>
         </tbody>
     </table>
+
+    <div class="modal fade" id="notifyModal" tabindex="-1" aria-labelledby="notifyModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-md">
+            <div class="modal-content alert-warning">
+                <div class="modal-header border-bottom-0 pb-1">
+                    <h3 class="modal-title" id="notifyModalLabel">Warning!</h3>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body pt-1">
+                    Notification Text Here
+                </div>
+            </div>
+        </div>
+    </div>
+
+
     <div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="aboutModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-xl modal-dialog-centered">
             <div class="modal-content">

dist/main.css

@@ -62,6 +62,10 @@
     font-size:1rem;
 }
 
+#notifyModal .modal-content {
+    background-color: var(--bs-alert-bg);
+}
+
 #calc td.join {
     background-color: var(--join-background);
     color: var(--join-foreground);

dist/main.js

@@ -1,6 +1,11 @@
 let subnetMap = {};
 let maxNetSize = 0;
 let infoColumnCount = 5
+
+$('input#network,input#netsize').on('input', function() {
+    $('#input_form')[0].classList.add('was-validated');
+})
+
 $('#btn_go').on('click', function() {
     reset();
 })
@@ -10,7 +15,13 @@ $('#btn_reset').on('click', function() {
 })
 
 function reset() {
-        let rootCidr = get_network($('#network').val(), $('#netsize').val()) + '/' + $('#netsize').val()
+    let cidrInput = $('#network').val() + '/' + $('#netsize').val()
+    let rootNetwork = get_network($('#network').val(), $('#netsize').val())
+    let rootCidr = rootNetwork + '/' + $('#netsize').val()
+    if (cidrInput !== rootCidr) {
+        show_warning_modal('<div>Your network input is not on a network boundary for this network size. It has been automatically changed:</div><div class="font-monospace pt-2">' + $('#network').val() + ' -> ' + rootNetwork + '</div>')
+    }
+    $('#network').val(rootNetwork)
     subnetMap = {}
     subnetMap[rootCidr] = {}
     maxNetSize = parseInt($('#netsize').val())
@@ -63,7 +74,6 @@ function reset() {
 
 $('#calcbody').on('click', 'td.split,td.join', function(event) {
     // HTML DOM Data elements! Yay! See the `data-*` attributes of the HTML tags
-    console.log(this.dataset.subnet)
     mutate_subnet_map(this.dataset.mutateVerb, this.dataset.subnet, subnetMap)
     renderTable();
 })
@@ -118,8 +128,6 @@ function addRow(network, netSize, colspan) {
     newRow += '            </tr>';
 
     $('#calcbody').append(newRow)
-    console.log(network)
-    console.log(netSize)
 }
 
 
@@ -224,7 +232,64 @@ function mutate_subnet_map(verb, network, subnetTree) {
         }
     }
 }
+/*
+function validate_cidr(network, netSize) {
+    let returnObj = {
+        'valid': false,
+        'errorNetwork': true,
+        'errorSize': true,
+        'cidr': false,
+        'network': false,
+        'netSize': false
+    }
+    returnObj['network'] = validate_network(network)
+    if (returnObj['network']) {
+        returnObj['errorNetwork'] = false;
+    }
+    if (!/^\d+$/.test(netSize)) {
+        returnObj['errorSize'] = true;
+    } else {
+        netSize = parseInt(netSize)
+        if ((netSize > 32) || (netSize < 0)) {
+            returnObj['errorSize'] = true;
+        } else {
+            returnObj['errorSize'] = false;
+            returnObj['netSize'] = netSize.toString()
+        }
+    }
+    if ((returnObj['errorNetwork'] === false) && (returnObj['errorSize'] === false)) {
+        returnObj['cidr'] = returnObj['network'] + '/' + returnObj['netSize']
+        returnObj['valid'] = true
+    }
+    return returnObj;
+}
+
+function validate_network(network) {
+    // This can probably be done with Regex but this is better.
+    let octets = network.split('.');
+    if (octets.length !== 4) { return false }
+    if (!/^\d+$/.test(octets[0])) { return false }
+    if (!/^\d+$/.test(octets[1])) { return false }
+    if (!/^\d+$/.test(octets[2])) { return false }
+    if (!/^\d+$/.test(octets[3])) { return false }
+    octets[0] = parseInt(octets[0])
+    octets[1] = parseInt(octets[1])
+    octets[2] = parseInt(octets[2])
+    octets[3] = parseInt(octets[3])
+    if ((octets[0] < 0) || (octets[0] > 255)) { return false }
+    if ((octets[1] < 0) || (octets[1] > 255)) { return false }
+    if ((octets[2] < 0) || (octets[2] > 255)) { return false }
+    if ((octets[3] < 0) || (octets[3] > 255)) { return false }
+    return octets.join('.')
+}
+*/
+
+function show_warning_modal(message) {
+    var notifyModal = new bootstrap.Modal(document.getElementById("notifyModal"), {});
+    $('#notifyModal .modal-body').html(message)
+    notifyModal.show()
+}
 
 $( document ).ready(function() {
     reset();
-});
+});