Reading and validating form input

Understanding Reading and validating form input

Every form control stores what the user typed as text, so input.value is a string no matter which type you set: an empty number box gives '', not 0, and '9' < '10' is false because both sides are still strings compared character by character. That is why inputs expose typed views onto the same data, valueAsNumber for number and range, valueAsDate for date and time, and those views give NaN or null when there is nothing parseable in the box. Checkboxes and radios differ again: value is the payload that would be sent, while checked is the state you actually want, so if (box.value) is true whether or not the box is ticked.

Validation sits in two layers that you can mix freely. The browser already understands required, min, max, step, maxlength, type and pattern, and reports the result through a live validity object whose flags, such as valueMissing, typeMismatch, rangeOverflow and patternMismatch, name the exact rule that failed, while checkValidity() returns the overall verdict and fires an invalid event. Your own layer covers what markup cannot express: cross-field rules like a repeated password, business rules like a coupon length, or anything needing a server. Asking validity first keeps each rule in one place and lets the browser block submission even before your script has run.

The reading pattern is to intercept the submit event, call preventDefault() so the page does not navigate away and wipe out the messages you are about to draw, pull every field into a plain object, and then check that object. form.elements.fieldName reads one control by its name attribute, and new FormData(form) collects the whole form exactly as it would be sent, which is why unchecked checkboxes and disabled or unnamed controls are simply absent and data.get('news') comes back null rather than false. Whichever route you take, normalise before you judge, because ' ' is not empty until you trim it and '42' is not a number until you convert it.

const form = document.createElement('form');
form.innerHTML =
  '<input name="username">' +
  '<input name="age" type="number">' +
  '<input name="terms" type="checkbox">';
document.body.append(form);

function readForm(f) {
  return {
    username: f.elements.username.value.trim(),
    age: f.elements.age.valueAsNumber,
    accepted: f.elements.terms.checked
  };
}

function validate(d) {
  const errors = [];
  if (d.username === '') errors.push('username: required');
  else if (d.username.length < 2) errors.push('username: too short');
  if (Number.isNaN(d.age)) errors.push('age: enter a number');
  else if (d.age < 18) errors.push('age: must be 18 or over');
  if (!d.accepted) errors.push('terms: must be accepted');
  return errors;
}

// Stand in for what a user typed.
form.elements.username.value = '   ';
form.elements.age.value = '17';

const data = readForm(form);
console.log(`raw ${JSON.stringify(form.elements.username.value)} -> trimmed ${JSON.stringify(data.username)}`);
console.log(`age ${data.age} is a ${typeof data.age}`);
console.log(`errors: ${validate(data).join(' | ')}`);

form.elements.username.value = 'Ada';
form.elements.age.value = '42';
form.elements.terms.checked = true;
console.log(`errors: ${validate(readForm(form)).length || 'none'}`);

Worked examples

const email = document.createElement('input');
email.type = 'email';
email.required = true;
document.body.append(email);

function report(label) {
  const v = email.validity;
  console.log(`${label} valid=${v.valid} missing=${v.valueMissing} typeMismatch=${v.typeMismatch} custom=${v.customError}`);
}

report('empty:');
email.value = 'ada.example.com';
report('no @:');
email.value = 'ada@example.com';
report('valid:');
email.setCustomValidity('That address is already registered');
report('taken:');
console.log(`message: ${email.validationMessage}`);
email.setCustomValidity('');
report('cleared:');

const form = document.createElement('form');
form.innerHTML =
  '<input name="city" value=" Oslo ">' +
  '<input name="news" type="checkbox">' +
  '<select name="plan"><option value="free">Free</option><option value="pro">Pro</option></select>';
document.body.append(form);

form.addEventListener('submit', event => {
  event.preventDefault();
  const data = new FormData(form);
  console.log(`city ${JSON.stringify(data.get('city'))}`);
  console.log(`news ${JSON.stringify(data.get('news'))}`);
  console.log(`plan ${data.get('plan')}`);
  console.log(`sent fields: ${[...data.keys()].join(', ')}`);
});

form.requestSubmit();

const qty = document.createElement('input');
Object.assign(qty, { type: 'number', min: '1', max: '10', value: '3' });
const due = document.createElement('input');
Object.assign(due, { type: 'date', value: '2026-03-01' });
document.body.append(qty, due);

console.log(`${typeof qty.value} ${JSON.stringify(qty.value)} -> ${qty.valueAsNumber + 1}`);
qty.value = 'twelve';
console.log(`after "twelve": ${JSON.stringify(qty.value)} ${qty.valueAsNumber}`);
qty.value = '99';
console.log(`rangeOverflow ${qty.validity.rangeOverflow}, max ${qty.max}`);
console.log(due.valueAsDate.toISOString());

Important notes

Common mistakes

Try it yourself