severinkaderli/bachelor-thesis
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Validate input field

Browse source 
Signed-off-by: Severin Kaderli <severin@kaderli.dev>
This commit is contained in:
Severin Kaderli 2022-11-23 16:55:41 +01:00
parent 87c748812a
commit 436e261fa7
Signed by: severinkaderli
GPG key ID: F419F8835B72F0C4
2 changed files with 27 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/website/index.html
View file

@ -10,7 +10,16 @@
<body> <body>
<main> <main>
<input required minlength="1" maxlength="16" id="textInput" type="text" placeholder="Enter text..." /> <!-- Pattern will only match valid ASCII characters -->
<input
required
minlength="1"
maxlength="16"
pattern="[\x20-\x7F]+"
id="textInput"
type="text"
placeholder="Enter text..."
/>
<p id="message"></p> <p id="message"></p>
<div class="buttons"> <div class="buttons">
<button id="start-sending-button" id="start-sending-button">Start Sending</button> <button id="start-sending-button" id="start-sending-button">Start Sending</button>

17
src/website/scripts/Main.js
View file

@ -51,6 +51,23 @@ function stopCalibration() {
} }
function startSending() { function startSending() {
textInput.setCustomValidity("");
// Validate the input
if (!textInput.checkValidity()) {
console.log(textInput.validity);
if (textInput.validity.valueMissing) {
textInput.setCustomValidity("Please enter between 1 and 16 characters.");
}
if (textInput.validity.patternMismatch) {
textInput.setCustomValidity("Please only enter valid ASCII characters.");
}
textInput.reportValidity();
return;
}
startSendingButton.classList.add(hideClass); startSendingButton.classList.add(hideClass);
stopSendingButton.classList.remove(hideClass); stopSendingButton.classList.remove(hideClass);
Utility.setMessage(`Sending message: ${textInput.value}`); Utility.setMessage(`Sending message: ${textInput.value}`);