<header>
  <h2 class="title">Перевірка даних користувача</h2>
  <p class="description">Цей приклад використовує конструкцію "try...catch" для обробки помилок при введенні даних.</p>
</header>
<main>
  <div class="result">
    <form id="userForm">
      <label for="name">Ім'я:</label><br>
      <input type="text" id="name" placeholder="Введіть своє ім'я"><br><br>

      <label for="age">Вік:</label><br>
      <input type="text" id="age" placeholder="Введіть свій вік"><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("userForm").addEventListener("submit", function(event) {
  event.preventDefault(); // Запобігає відправці форми

  const name = document.getElementById("name").value;
  const age = document.getElementById("age").value;
  const messageElement = document.getElementById("message");

  try {
    validateForm(name, age);
    messageElement.style.color = "green";
    messageElement.textContent = "Дані успішно підтверджено!";
  } catch (error) {
    messageElement.style.color = "red";
    messageElement.textContent = error.message;
  }
});

function validateForm(name, age) {
  if (!name) {
    throw new Error("Ім'я не може бути порожнім!");
  }
  if (!age) {
    throw new Error("Вік не може бути порожнім!");
  }
  if (isNaN(age) || age <= 0) {
    throw new Error("Вік повинен бути числом більше за 0!");
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.