jeka/OTGateway
1
0
Fork 0
mirror of https://github.com/Laxilef/OTGateway.git synced 2025-12-10 18:24:27 +05:00
Code Issues Packages Projects Releases Wiki Activity

feat: added form validation

Browse Source
This commit is contained in:
Yurii
2024-01-19 03:05:50 +03:00
parent 99088fb723
commit 2adbda6832
4 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
data/network.html
View File

@@ -33,7 +33,7 @@
<form action="/api/network/settings" id="network-settings" class="hidden">
<label for="hostname">
Hostname
<input type="text" class="network-hostname" name="hostname" maxlength="24" required>
<input type="text" class="network-hostname" name="hostname" maxlength="24" pattern="^[A-Za-z0-9]+[A-Za-z0-9\-]*[A-Za-z0-9]+$" required>
</label>
<label for="network-use-dhcp">
<input type="checkbox" class="network-use-dhcp" name="useDhcp" value="true">
@@ -43,19 +43,19 @@
<hr>
<label for="network-static-ip">
Static IP:
<input type="text" class="network-static-ip" name="staticConfig[ip]" value="true" maxlength="16" required>
<input type="text" class="network-static-ip" name="staticConfig[ip]" value="true" maxlength="16" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" required>
</label>
<label for="network-static-gateway">
Static gateway:
<input type="text" class="network-static-gateway" name="staticConfig[gateway]" maxlength="16" required>
<input type="text" class="network-static-gateway" name="staticConfig[gateway]" maxlength="16" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" required>
</label>
<label for="network-static-subnet">
Static subnet:
<input type="text" class="network-static-subnet" name="staticConfig[subnet]" maxlength="16" required>
<input type="text" class="network-static-subnet" name="staticConfig[subnet]" maxlength="16" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" required>
</label>
<label for="network-static-dns">
Static DNS:
<input type="text" class="network-static-dns" name="staticConfig[dns]" maxlength="16" required>
<input type="text" class="network-static-dns" name="staticConfig[dns]" maxlength="16" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" required>
</label>
<button type="submit">Save</button>
</form>
@@ -103,7 +103,7 @@
</label>
<label for="sta-channel">
Channel:
<input type="number" class="sta-channel" name="sta[channel]" min="0" max="12" maxlength="2" required>
<input type="number" inputmode="numeric" class="sta-channel" name="sta[channel]" min="0" max="12" step="1" required>
<small>set 0 for auto select</small>
</label>
@@ -131,7 +131,7 @@
</label>
<label for="ap-channel">
Channel:
<input type="number" class="ap-channel" name="ap[channel]" min="1" max="12" required>
<input type="number" inputmode="numeric" class="ap-channel" name="ap[channel]" min="1" max="12" step="1" required>
</label>
<button type="submit">Save</button>
</form>

26
data/settings.html
View File

@@ -65,15 +65,15 @@
<div class="grid">
<label for="opentherm-in-pin">
In GPIO
<input type="number" class="opentherm-in-pin" name="opentherm[inPin]" maxlength="2" required>
<input type="number" inputmode="numeric" class="opentherm-in-pin" name="opentherm[inPin]" min="0" max="99" step="1" required>
</label>
<label for="opentherm-in-pin">
Out GPIO
<input type="number" class="opentherm-out-pin" name="opentherm[outPin]" maxlength="2" required>
<input type="number" inputmode="numeric" class="opentherm-out-pin" name="opentherm[outPin]" min="0" max="99" step="1" required>
</label>
<label for="opentherm-member-id-code">
Master MemberID code
<input type="number" class="opentherm-member-id-code" name="opentherm[memberIdCode]" maxlength="2" required>
<input type="number" inputmode="numeric" class="opentherm-member-id-code" name="opentherm[memberIdCode]" min="0" max="65535" step="1" required>
</label>
</div>
@@ -134,7 +134,7 @@
</label>
<label for="mqtt-port">
Port
<input type="number" class="mqtt-port" name="mqtt[port]" maxlength="5" required>
<input type="number" inputmode="numeric" class="mqtt-port" name="mqtt[port]" min="1" max="65535" step="1" required>
</label>
</div>
@@ -156,7 +156,7 @@
</label>
<label for="mqtt-interval">
Publish interval <small>(sec)</small>
<input type="number" class="mqtt-interval" name="mqtt[interval]" maxlength="2" required>
<input type="number" inputmode="numeric" class="mqtt-interval" name="mqtt[interval]" min="3" max="60" step="1" required>
</label>
</div>
@@ -192,11 +192,11 @@
<label for="outdoor-sensor-pin">
GPIO
<input type="number" class="outdoor-sensor-pin" name="sensors[outdoor][pin]" maxlength="2" required>
<input type="number" inputmode="numeric" class="outdoor-sensor-pin" name="sensors[outdoor][pin]" min="0" max="99" step="1" required>
</label>
<label for="outdoor-sensor-offset">
Temp offset (calibration)
<input type="number" class="outdoor-sensor-offset" name="sensors[outdoor][offset]" maxlength="2" required>
<input type="number" inputmode="numeric" class="outdoor-sensor-offset" name="sensors[outdoor][offset]" min="-20" max="20" step="0.01" required>
</label>
<button type="submit">Save</button>
@@ -231,13 +231,13 @@
<label for="indoor-sensor-pin">
GPIO
<input type="number" class="indoor-sensor-pin" name="sensors[indoor][pin]" maxlength="2" required>
<input type="number" inputmode="numeric" class="indoor-sensor-pin" name="sensors[indoor][pin]" min="0" max="99" step="1" required>
</label>
<div class="grid">
<label for="indoor-sensor-offset">
Temp offset (calibration)
<input type="number" class="indoor-sensor-offset" name="sensors[indoor][offset]" maxlength="2" required>
<input type="number" inputmode="numeric" class="indoor-sensor-offset" name="sensors[indoor][offset]" min="-20" max="20" step="0.01" required>
</label>
<label for="indoor-sensor-ble-addresss">
BLE addresss
@@ -269,22 +269,22 @@
<div class="grid">
<label for="extpump-pin">
Relay GPIO
<input type="number" class="extpump-pin" name="externalPump[pin]" maxlength="2" required>
<input type="number" inputmode="numeric" class="extpump-pin" name="externalPump[pin]" min="0" max="99" step="1" required>
</label>
<label for="extpump-pc-time">
Post circulation time <small>(min)</small>
<input type="number" class="extpump-pc-time" name="externalPump[postCirculationTime]" maxlength="2" required>
<input type="number" inputmode="numeric" class="extpump-pc-time" name="externalPump[postCirculationTime]" min="1" max="120" step="1" required>
</label>
</div>
<div class="grid">
<label for="extpump-as-interval">
Anti stuck interval <small>(days)</small>
<input type="number" class="extpump-as-interval" name="externalPump[antiStuckInterval]" maxlength="3" required>
<input type="number" inputmode="numeric" class="extpump-as-interval" name="externalPump[antiStuckInterval]" min="1" max="366" step="1" required>
</label>
<label for="extpump-as-time">
Anti stuck time <small>(min)</small>
<input type="number" class="extpump-as-time" name="externalPump[antiStuckTime]" maxlength="2" required>
<input type="number" inputmode="numeric" class="extpump-as-time" name="externalPump[antiStuckTime]" min="1" max="20" step="1" required>
</label>
</div>

BIN
data/static/app.js.gz
View File

Binary file not shown.

6
src_data/static/app.js
View File

@@ -4,6 +4,12 @@ function setupForm(formSelector) {
return;
}
form.querySelectorAll('input').forEach(item => {
item.addEventListener('change', (e) => {
e.target.setAttribute('aria-invalid', !e.target.checkValidity());
})
});
const url = form.action;
let button = form.querySelector('button[type="submit"]');
let defaultText;