Add form validation
This commit is contained in:
Caesar Kabalan
parent
56889653f9
commit
80cae85368
3 changed files with 97 additions and 12 deletions
30
dist/index.html
vendored
30
dist/index.html
vendored
|
|
@ -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><input id="network" type="text" class="form-control" value="10.0.0.0" aria-label="Network Address"></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" 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><input id="netsize" type="text" class="form-control w-10" value="16" aria-label="Network Size"></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" 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">
|
||||
|
|
|
|||
4
dist/main.css
vendored
4
dist/main.css
vendored
|
|
@ -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);
|
||||
|
|
|
|||
75
dist/main.js
vendored
75
dist/main.js
vendored
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue