JavaScript Forms and Validation – Handling User Input

// By ID (most common)
const form    = document.getElementById('signup-form');
const emailEl = document.getElementById('email');

// Via form.elements (named collection)
// Works with name or id attribute
const nameInput = form.elements['username'];
const emailInput = form.elements['email'];

// .elements also supports numeric index
console.log(form.elements[0]); // first input in the form

// Form reference from an input
const parentForm = emailEl.form; // the <form> that owns this input

// All inputs matching a type
const checkboxes = form.querySelectorAll('input[type="checkbox"]');

// Text, email, password, number, textarea — use .value
const username = document.getElementById('username').value;
const email    = document.getElementById('email').value.trim();

// Checkbox — use .checked (boolean)
const agreeBox = document.getElementById('agree');
console.log(agreeBox.checked); // true | false

// Radio buttons — find the checked one
const genderInputs = document.querySelectorAll('input[name="gender"]');
let selectedGender = '';
genderInputs.forEach(radio => {
  if (radio.checked) selectedGender = radio.value;
});

// Select (dropdown) — .value gives selected option's value
const country = document.getElementById('country').value;
// Multi-select — iterate options
const multiSelect = document.getElementById('skills');
const selected = Array.from(multiSelect.options)
  .filter(opt => opt.selected)
  .map(opt => opt.value);

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

form.addEventListener('submit', (e) => {
  e.preventDefault(); // stops the browser from reloading / navigating

  const email    = form.elements['email'].value.trim();
  const password = form.elements['password'].value;

  if (!email || !password) {
    showError('All fields are required.');
    return;
  }

  // Send data to server (AJAX / Fetch)
  submitLogin({ email, password });
});

function showError(message) {
  const errorEl = document.getElementById('form-error');
  errorEl.textContent = message;
  errorEl.style.display = 'block';
}

function submitLogin(data) {
  fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  }).then(res => res.json()).then(handleResponse);
}

const emailInput = document.getElementById('email');
const emailError = document.getElementById('email-error');

// Validate as the user types
emailInput.addEventListener('input', () => {
  const value = emailInput.value.trim();
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (value === '') {
    showFieldError(emailInput, emailError, 'Email is required');
  } else if (!emailRegex.test(value)) {
    showFieldError(emailInput, emailError, 'Enter a valid email address');
  } else {
    clearFieldError(emailInput, emailError);
  }
});

function showFieldError(input, errorEl, message) {
  input.classList.add('invalid');
  input.classList.remove('valid');
  errorEl.textContent = message;
  errorEl.style.display = 'block';
}

function clearFieldError(input, errorEl) {
  input.classList.remove('invalid');
  input.classList.add('valid');
  errorEl.textContent = '';
  errorEl.style.display = 'none';
}

const input = document.getElementById('username');

// checkValidity() — returns true if all constraints pass
console.log(input.checkValidity()); // false if required + empty

// validity object — individual flags
const v = input.validity;
console.log(v.valueMissing);   // true if required and empty
console.log(v.tooShort);       // true if below minlength
console.log(v.patternMismatch);// true if pattern attr fails
console.log(v.typeMismatch);   // true for wrong type (email, url, etc.)

// validationMessage — browser's localised error string
console.log(input.validationMessage); // "Please fill in this field."

// setCustomValidity — override with your own message
input.setCustomValidity('Username must not contain spaces');
// Reset to built-in validation (empty string = valid)
input.setCustomValidity('');

// form.checkValidity() — validates ALL fields
const form = document.getElementById('signup-form');
if (!form.checkValidity()) {
  form.reportValidity(); // shows native tooltips
}

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

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

  // Automatically reads ALL named inputs, including files
  const formData = new FormData(form);

  // Read individual values
  console.log(formData.get('username'));
  console.log(formData.get('avatar'));   // File object

  // Iterate all entries
  for (const [name, value] of formData.entries()) {
    console.log(name, value);
  }

  // Modify programmatically
  formData.set('timestamp', Date.now());
  formData.delete('honeypot'); // remove spam trap field

  // Send as multipart/form-data (perfect for file uploads)
  fetch('/api/profile', {
    method: 'POST',
    body: formData  // DO NOT set Content-Type header — browser sets it
  });

  // Convert to plain object
  const data = Object.fromEntries(formData.entries());
  console.log(data);
});

const fileInput = document.getElementById('avatar');

fileInput.addEventListener('change', () => {
  const files = fileInput.files; // FileList (array-like)
  const file  = files[0];        // first selected file

  if (!file) return;

  // File metadata
  console.log(file.name);    // "photo.jpg"
  console.log(file.size);    // bytes
  console.log(file.type);    // "image/jpeg"

  // Validate size (max 2 MB)
  const MAX_SIZE = 2 * 1024 * 1024;
  if (file.size > MAX_SIZE) {
    showError('File must be under 2 MB');
    fileInput.value = ''; // clear selection
    return;
  }

  // Preview image with FileReader
  const reader = new FileReader();
  reader.onload = (e) => {
    document.getElementById('preview').src = e.target.result;
  };
  reader.readAsDataURL(file);
});