كيفية التعامل مع إرسال النماذج والتحقق منها في JavaScript

<form id="register-form" novalidate>
  <div class="field">
    <label for="name">Name</label>
    <input id="name" name="name" type="text" required minlength="2">
    <span class="field-error" aria-live="polite"></span>
  </div>

  <div class="field">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" required>
    <span class="field-error" aria-live="polite"></span>
  </div>

  <button type="submit">Register</button>
</form>

const form = document.getElementById('register-form');

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

function getValidationMessage(input) {
  if (input.validity.valueMissing) return 'This field is required.';
  if (input.validity.typeMismatch) return `Please enter a valid ${input.type}.`;
  if (input.validity.tooShort) return `Minimum ${input.minLength} characters required.`;
  if (input.validity.patternMismatch) return input.title || 'Invalid format.';
  return '';
}

function validateForm(form) {
  let valid = true;
  form.querySelectorAll('input').forEach((input) => {
    const msg = getValidationMessage(input);
    showFieldError(input, msg);
    if (msg) valid = false;
  });
  return valid;
}

function showFieldError(input, message) {
  const errorEl = input.closest('.field')?.querySelector('.field-error');
  if (!errorEl) return;

  if (message) {
    errorEl.textContent = message;
    input.classList.add('is-invalid');
    input.setAttribute('aria-invalid', 'true');
  } else {
    errorEl.textContent = '';
    input.classList.remove('is-invalid');
    input.removeAttribute('aria-invalid');
  }
}

// Clear errors when the user starts fixing them
form.querySelectorAll('input').forEach((input) => {
  input.addEventListener('input', () => showFieldError(input, ''));
});

async function handleSubmit(form) {
  if (!validateForm(form)) return;

  const btn = form.querySelector('[type="submit"]');
  btn.disabled = true;
  btn.textContent = 'Sending…';

  const formData = new FormData(form);

  try {
    const response = await fetch('/api/register', {
      method: 'POST',
      body: formData, // No Content-Type header: browser sets multipart boundary
    });

    if (response.status === 422) {
      const { errors } = await response.json();
      applyServerErrors(form, errors);
      return;
    }

    if (!response.ok) throw new Error(`Server error: ${response.status}`);

    form.reset();
    showSuccess('Registration complete!');
  } catch (err) {
    showError(err.message);
  } finally {
    btn.disabled = false;
    btn.textContent = 'Register';
  }
}

// Server returns: { errors: { email: ['Already taken.'], name: ['Too short.'] } }
function applyServerErrors(form, errors) {
  Object.entries(errors).forEach(([fieldName, messages]) => {
    const input = form.querySelector(`[name="${fieldName}"]`);
    if (input) {
      showFieldError(input, messages[0]); // Show first error per field
    }
  });
}

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

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