Формы и клиентская валидация

<form id="profile">
  <input name="email" value="a@example.com">
  <input type="checkbox" name="subscribe" checked>
  <input name="disabledCode" value="X" disabled>
</form>
<script>
  const form = document.querySelector("#profile");
  console.log([...new FormData(form)]);
</script>

const data = new FormData(form);
console.log(data.get("tag"));
console.log(data.getAll("tag"));

const box = document.querySelector("input[type=checkbox]");
console.log(box.checked, box.value);

<input id="name" required>
<script>
  const input = document.querySelector("#name");
  console.log(input.validity.valueMissing);
</script>

input.setCustomValidity("Код уже занят");
input.value = "новый-код";
console.log(input.checkValidity());

if (!form.reportValidity()) {
  console.log("Есть ошибки");
}

<input id="age" type="number">
<script>
  const input = document.querySelector("#age");
  console.log(input.valueAsNumber);
</script>

const password = form.elements.password.value.trim();

console.log(Number("1,5"));

<label for="email">Почта</label>
<input id="email" aria-describedby="email-error" aria-invalid="true">
<p id="email-error">Укажите адрес целиком</p>

form.addEventListener("submit", event => {
  if (!form.checkValidity()) {
    event.preventDefault();
    showFieldErrors();
  }
});

submitButton.disabled = true;
await fetch("/pay", { method: "POST", body: data });

saveButton.addEventListener("click", sendForm);

setSubmitting(true);
try {
  await save(new FormData(form));
} finally {
  setSubmitting(false);
}