Події форм і введення

<label for="message">Повідомлення</label>
<textarea id="message" maxlength="120"></textarea>

<p>
  Символів:
  <span id="counter">0</span>/120
</p>

<script>
  const message = document.querySelector('#message');
  const counter = document.querySelector('#counter');

  message.addEventListener('input', (event) => {
    counter.textContent = event.target.value.length;
  });
</script>

<label for="language">Мова програмування</label>
<select id="language">
  <option value="">Оберіть мову</option>
  <option value="javascript">JavaScript</option>
  <option value="python">Python</option>
  <option value="go">Go</option>
</select>

<p id="selected-language"></p>

<script>
  const language = document.querySelector('#language');
  const selectedLanguage = document.querySelector('#selected-language');

  language.addEventListener('change', (event) => {
    const value = event.target.value;

    selectedLanguage.textContent = value
      ? `Ви обрали: ${value}`
      : 'Мову не обрано';
  });
</script>

const email = document.querySelector('#email');

console.log(email.value);

const normalizedEmail = email.value.trim();

<label>
  <input id="agreement" type="checkbox">
  Погоджуюся з умовами
</label>

<script>
  const agreement = document.querySelector('#agreement');

  agreement.addEventListener('change', (event) => {
    console.log(event.target.checked);
  });
</script>

<label>
  <input type="radio" name="plan" value="basic">
  Базовий
</label>

<label>
  <input type="radio" name="plan" value="pro">
  Професійний
</label>

<script>
  const selectedPlan = document.querySelector(
    'input[name="plan"]:checked'
  );

  console.log(selectedPlan ? selectedPlan.value : null);
</script>

<form id="login-form">
  <input name="email" type="email" required>
  <button type="submit">Увійти</button>
</form>

<script>
  const loginForm = document.querySelector('#login-form');

  loginForm.addEventListener('submit', (event) => {
    event.preventDefault();

    console.log('Форма готова до обробки');
  });
</script>

<form id="profile-form">
  <input name="name" type="text" value="Олена">
  <input name="email" type="email" value="olena@example.com">

  <button type="submit">Зберегти</button>
</form>

<script>
  const profileForm = document.querySelector('#profile-form');

  profileForm.addEventListener('submit', (event) => {
    event.preventDefault();

    const formData = new FormData(profileForm);

    console.log(formData.get('name'));
    console.log(formData.get('email'));
  });
</script>

const data = Object.fromEntries(new FormData(profileForm));

console.log(data);

{
  name: 'Олена',
  email: 'olena@example.com'
}

<form>
  <input
    name="email"
    type="email"
    required
    placeholder="name@example.com"
  >

  <input
    name="password"
    type="password"
    minlength="8"
    required
  >

  <button type="submit">Зареєструватися</button>
</form>

const emailInput = document.querySelector('input[type="email"]');

if (!emailInput.validity.valid) {
  console.log('Некоректна електронна адреса');
}

const form = document.querySelector('form');

if (form.checkValidity()) {
  console.log('Усі поля заповнено правильно');
}

form.reportValidity();

<form id="signup-form">
  <label>
    Пароль
    <input id="password" name="password" type="password" required>
  </label>

  <label>
    Підтвердження пароля
    <input
      id="password-confirmation"
      name="passwordConfirmation"
      type="password"
      required
    >
  </label>

  <button type="submit">Створити обліковий запис</button>
</form>

<script>
  const form = document.querySelector('#signup-form');
  const password = document.querySelector('#password');
  const confirmation = document.querySelector('#password-confirmation');

  function validatePasswords() {
    if (password.value !== confirmation.value) {
      confirmation.setCustomValidity('Паролі повинні збігатися');
    } else {
      confirmation.setCustomValidity('');
    }
  }

  password.addEventListener('input', validatePasswords);
  confirmation.addEventListener('input', validatePasswords);

  form.addEventListener('submit', (event) => {
    validatePasswords();

    if (!form.checkValidity()) {
      event.preventDefault();
    }
  });
</script>

<!doctype html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>Реєстрація</title>
  <style>
    body {
      font-family: sans-serif;
      max-width: 480px;
      margin: 32px auto;
      padding: 0 16px;
    }

    label {
      display: block;
      margin-top: 16px;
    }

    input {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin-top: 4px;
      padding: 8px;
    }

    .error {
      min-height: 20px;
      color: #b00020;
      font-size: 14px;
    }

    .success {
      color: #167d2f;
    }
  </style>
</head>
<body>
  <form id="signup-form" novalidate>
    <h1>Створення облікового запису</h1>

    <label for="name">Ім’я</label>
    <input id="name" name="name" type="text" required minlength="2">
    <p id="name-error" class="error"></p>

    <label for="email">Email</label>
    <input id="email" name="email" type="email" required>
    <p id="email-error" class="error"></p>

    <label for="password">Пароль</label>
    <input
      id="password"
      name="password"
      type="password"
      required
      minlength="8"
    >
    <p id="password-error" class="error"></p>

    <label for="confirmation">Підтвердження пароля</label>
    <input
      id="confirmation"
      name="confirmation"
      type="password"
      required
    >
    <p id="confirmation-error" class="error"></p>

    <label>
      <input id="terms" name="terms" type="checkbox" required>
      Я погоджуюся з умовами
    </label>
    <p id="terms-error" class="error"></p>

    <button type="submit">Зареєструватися</button>
    <p id="result"></p>
  </form>

  <script>
    const form = document.querySelector('#signup-form');
    const nameInput = document.querySelector('#name');
    const emailInput = document.querySelector('#email');
    const passwordInput = document.querySelector('#password');
    const confirmationInput = document.querySelector('#confirmation');
    const termsInput = document.querySelector('#terms');

    const nameError = document.querySelector('#name-error');
    const emailError = document.querySelector('#email-error');
    const passwordError = document.querySelector('#password-error');
    const confirmationError = document.querySelector('#confirmation-error');
    const termsError = document.querySelector('#terms-error');
    const result = document.querySelector('#result');

    function validateName() {
      const value = nameInput.value.trim();

      if (value.length < 2) {
        nameError.textContent = 'Ім’я має містити щонайменше 2 символи';
        return false;
      }

      nameError.textContent = '';
      return true;
    }

    function validateEmail() {
      if (emailInput.validity.valueMissing) {
        emailError.textContent = 'Введіть email';
        return false;
      }

      if (emailInput.validity.typeMismatch) {
        emailError.textContent = 'Введіть коректний email';
        return false;
      }

      emailError.textContent = '';
      return true;
    }

    function validatePassword() {
      if (passwordInput.value.length < 8) {
        passwordError.textContent = 'Пароль має містити щонайменше 8 символів';
        return false;
      }

      passwordError.textContent = '';
      return true;
    }

    function validateConfirmation() {
      if (confirmationInput.value !== passwordInput.value) {
        confirmationError.textContent = 'Паролі не збігаються';
        return false;
      }

      confirmationError.textContent = '';
      return true;
    }

    function validateTerms() {
      if (!termsInput.checked) {
        termsError.textContent = 'Потрібно погодитися з умовами';
        return false;
      }

      termsError.textContent = '';
      return true;
    }

    nameInput.addEventListener('input', validateName);
    emailInput.addEventListener('change', validateEmail);
    passwordInput.addEventListener('input', () => {
      validatePassword();
      validateConfirmation();
    });
    confirmationInput.addEventListener('input', validateConfirmation);
    termsInput.addEventListener('change', validateTerms);

    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = '';
      result.className = '';

      const isValid = [
        validateName(),
        validateEmail(),
        validatePassword(),
        validateConfirmation(),
        validateTerms()
      ].every(Boolean);

      if (!isValid) {
        return;
      }

      const data = Object.fromEntries(new FormData(form));

      console.log(data);

      result.textContent = `Користувача ${data.name} успішно зареєстровано`;
      result.className = 'success';
      form.reset();
    });
  </script>
</body>
</html>

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  if (!form.checkValidity()) {
    form.reportValidity();
    return;
  }

  const data = Object.fromEntries(new FormData(form));

  const response = await fetch('/api/signup', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  });

  if (!response.ok) {
    throw new Error('Не вдалося надіслати форму');
  }
});

<form id="settings-form">
  <input name="nickname" type="text">
  <select name="theme">
    <option value="light">Світла</option>
    <option value="dark">Темна</option>
  </select>
</form>

<script>
  const settingsForm = document.querySelector('#settings-form');

  settingsForm.addEventListener('input', (event) => {
    if (event.target.matches('input')) {
      console.log(`Змінено поле: ${event.target.name}`);
    }
  });

  settingsForm.addEventListener('change', (event) => {
    if (event.target.matches('select')) {
      console.log(`Обрано тему: ${event.target.value}`);
    }
  });
</script>

// Неповний підхід
button.addEventListener('click', handleSubmit);

form.addEventListener('submit', handleSubmit);

form.addEventListener('submit', (event) => {
  event.preventDefault();
});

if (termsInput.checked) {
  console.log('Умови прийнято');
}

<!-- Поле не потрапить до FormData -->
<input id="email" type="email">

<input id="email" name="email" type="email">

message.textContent = userInput;