frodovdr/raspap-webgui
1
0
Fork 0
mirror of https://github.com/billz/raspap-webgui.git synced 2025-03-01 10:31:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1450 from RaspAP/feat/form-validation

Browse Source 
Custom Bootstrap form validation for required fields
This commit is contained in:
Bill Zimmerman
2023-11-11 09:39:57 +01:00
committed by GitHub
parent fc12951e88 86a8e0e41d
commit 0b114ecab7
20 changed files with 327 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/css/all.css
View File

@@ -16,6 +16,10 @@ License: GNU General Public License v3.0
h4.mt-3 { margin-left: 0.5rem; }
}
.sidebar.toggled .nav-item .nav-link {
padding: 0.65rem 1rem;
}
.sidebar-brand-text {
text-transform: none;
color: #212529;
@@ -52,7 +56,11 @@ License: GNU General Public License v3.0
.info-item-xs {
font-size: 0.7rem;
margin-left: 0.3rem;
margin-left: 0.75rem;
}
.sb-status {
margin-left: 0.75rem!important;
}
.info-item-wifi {
@@ -235,3 +243,22 @@ button > i.fas {
font-size: 1.3rem;
}
.was-validated .form-control:valid,
.was-validated .form-control:invalid {
background-position: center right calc(.375em + .4875rem);
}
.was-validated .form-control:invalid {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:valid {
background-size: calc(0.6em + 0.375rem) calc(0.6em + 0.375rem);
}
.input-group>.input-group-append:not(:last-child)>.btn {
border-top-right-radius: 0.35rem;
border-bottom-right-radius: 0.35rem;
}

15
app/css/material-dark.php
View File

@@ -627,3 +627,18 @@ a.scroll-to-top.rounded i.fas.fa-angle-up {
padding: 5px;
box-sizing: border-box;
}
.was-validated .form-control:valid,
.was-validated .form-control:invalid {
background-position: center right calc(.375em + .4875rem);
}
.was-validated .form-control:invalid {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:valid {
background-size: calc(0.6em + 0.375rem) calc(0.6em + 0.375rem);
}

15
app/css/material-light.php
View File

@@ -633,3 +633,18 @@ a.scroll-to-top.rounded i.fas.fa-angle-up {
padding: 5px;
box-sizing: border-box;
}
.was-validated .form-control:valid,
.was-validated .form-control:invalid {
background-position: center right calc(.375em + .4875rem);
}
.was-validated .form-control:invalid {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:valid {
background-size: calc(0.6em + 0.375rem) calc(0.6em + 0.375rem);
}

84
app/js/custom.js
View File

@@ -241,6 +241,7 @@ function loadInterfaceDHCPSelect() {
$('#chkstatic').closest('.btn').button('toggle').blur();
$('#chkstatic').blur();
$('#chkfallback').prop('disabled', true);
$('#dhcp-iface').removeAttr('disabled');
} else {
$('#chkdhcp').closest('.btn').button('toggle');
$('#chkdhcp').closest('.btn').button('toggle').blur();
@@ -249,6 +250,7 @@ function loadInterfaceDHCPSelect() {
}
if (jsonData.FallbackEnabled || $('#chkdhcp').is(':checked')) {
$('#dhcp-iface').prop('disabled', true);
setDhcpFieldsDisabled();
}
});
}
@@ -259,6 +261,7 @@ function setDHCPToggles(state) {
}
if ($('#dhcp-iface').is(':checked') && !state) {
$('#dhcp-iface').prop('checked', state);
setDhcpFieldsDisabled();
}
$('#chkfallback').prop('disabled', state);
$('#dhcp-iface').prop('disabled', !state);
@@ -365,7 +368,15 @@ $('#js-sys-reboot, #js-sys-shutdown').on('click', function (e) {
});
$(document).ready(function(){
$("#PanelManual").hide();
$("#PanelManual").hide();
$('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {
translation: {
'Z': {
pattern: /[0-9]/, optional: true
}
},
placeholder: "___.___.___.___"
});
});
$('#wg-upload,#wg-manual').on('click', function (e) {
@@ -542,6 +553,77 @@ window.addEventListener('load', function() {
});
}, false);
// DHCP or Static IP option group
$('#chkstatic').on('change', function() {
if (this.checked) {
setStaticFieldsEnabled();
}
});
$('#chkdhcp').on('change', function() {
this.checked ? setStaticFieldsDisabled() : null;
});
$('input[name="dhcp-iface"]').change(function() {
if ($('input[name="dhcp-iface"]:checked').val() == '1') {
setDhcpFieldsEnabled();
} else {
setDhcpFieldsDisabled();
}
});
function setStaticFieldsEnabled() {
$('#txtipaddress').prop('required', true);
$('#txtsubnetmask').prop('required', true);
$('#txtgateway').prop('required', true);
$('#txtipaddress').removeAttr('disabled');
$('#txtsubnetmask').removeAttr('disabled');
$('#txtgateway').removeAttr('disabled');
}
function setStaticFieldsDisabled() {
$('#txtipaddress').prop('disabled', true);
$('#txtsubnetmask').prop('disabled', true);
$('#txtgateway').prop('disabled', true);
$('#txtipaddress').removeAttr('required');
$('#txtsubnetmask').removeAttr('required');
$('#txtgateway').removeAttr('required');
}
function setDhcpFieldsEnabled() {
$('#txtrangestart').prop('required', true);
$('#txtrangeend').prop('required', true);
$('#txtrangeleasetime').prop('required', true);
$('#cbxrangeleasetimeunits').prop('required', true);
$('#txtrangestart').removeAttr('disabled');
$('#txtrangeend').removeAttr('disabled');
$('#txtrangeleasetime').removeAttr('disabled');
$('#cbxrangeleasetimeunits').removeAttr('disabled');
$('#txtdns1').removeAttr('disabled');
$('#txtdns2').removeAttr('disabled');
$('#txtmetric').removeAttr('disabled');
}
function setDhcpFieldsDisabled() {
$('#txtrangestart').removeAttr('required');
$('#txtrangeend').removeAttr('required');
$('#txtrangeleasetime').removeAttr('required');
$('#cbxrangeleasetimeunits').removeAttr('required');
$('#txtrangestart').prop('disabled', true);
$('#txtrangeend').prop('disabled', true);
$('#txtrangeleasetime').prop('disabled', true);
$('#cbxrangeleasetimeunits').prop('disabled', true);
$('#txtdns1').prop('disabled', true);
$('#txtdns2').prop('disabled', true);
$('#txtmetric').prop('disabled', true);
}
// Static Array method
Array.range = (start, end) => Array.from({length: (end - start)}, (v, k) => k + start);