<header>
<h2 class="title">Використання "throw" у валідації форми</h2>
<p class="description">Завершує виконання, якщо введені дані не відповідають умовам.</p>
</header>
<main>
<div class="result">
<form id="validationForm">
<label for="userInput">Введіть число (від 1 до 100):</label><br>
<input type="text" id="userInput" placeholder="Наприклад: 42"><br><br>
<button type="submit">Перевірити</button>
</form>
<p id="message"></p>
</div>
</main>
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
#message {
margin-top: 15px;
font-weight: bold;
}
document.getElementById("validationForm").addEventListener("submit", function (event) {
event.preventDefault(); // Запобігаємо перезавантаженню сторінки
const userInput = document.getElementById("userInput").value;
const messageElement = document.getElementById("message");
try {
validateInput(userInput);
messageElement.style.color = "green";
messageElement.textContent = "Введені дані коректні!";
} catch (error) {
messageElement.style.color = "red";
messageElement.textContent = error.message;
}
});
function validateInput(input) {
const number = Number(input);
if (isNaN(number)) {
throw new Error("Ви повинні ввести число!");
}
if (number < 1 || number > 100) {
throw new Error("Число повинно бути в діапазоні від 1 до 100.");
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.